mobileapp - Let Me Fail

VS Code, Technology, Web Programming

Best Free VS Code Themes 2022🤩

Posted on June 25, 2022June 25, 2022 by Febronei

25
Jun

It is already halfway through 2022 and if you are still looking for any VSCode themes, then here is the list of some of the most popular VS Code themes for 2022 so far.

List of the top 5 VSCode themes – My choice:

Atom One Dark Theme
GitHub Theme
Night Owl Theme
JellyFish Theme
Sublime Material Theme

Atom One Dark Theme

One of the best dark theme port in the marketplace. Atom’s iconic One Dark theme for Visual Studio Code is so popular among developers who loves dark mode.

It has visually pleasing styles and well-blended color schemes, therefore it is considered as one of the most used themes, nearly 3.3 million download in the market place as of today.

Here are some of the stats:

No. of Installs: 3,279,542 installs
Rating: 4.81/5 (102)
Current version: v2.2.3 | 1/4/2021| Free

It is popular theme for developers who prefer GitHub’s classic themes. It comes with various new styles, simply you need to select any available theme during installation process. You can choose one of these themes.

GitHub Light Default
GitHub Light High Contrast ✨ new ✨
GitHub Light Colorblind ✨ new ✨
GitHub Dark Default
GitHub Dark High Contrast
GitHub Dark Colorblind ✨ new ✨
GitHub Dark Dimmed

There are also two older themes. Note: They might not get updated frequently and are kept for legacy reasons:

GitHub Light (legacy)
GitHub Dark (legacy)

Here are some of the stats:

No. of Installs: 4,349,035 installs
Rating: – (120)
Current version: v6.0.0 | 2/11/2022 | Free

Night Owl Theme

This theme is fine-tuned for those of us who really like to code late at night. It comes with both dark (Night Owl) and light theme (Light Owl). The color choices, background, and styling are perfectly suitable for developers who are having difficulties in low-light circumstances. ✨

Night Owl

Light Owl

Here are some of the stats:

No. of Installs: 1,463,301 installs
Rating: – (119)
Current version: v2.0.1 | 7/4/2021 | Free

JellyFish Theme

It is also a beautiful theme. The font (Hermit) and colors used by the theme is easy on the eyes. The colors used by this theme for highlighting code are Aqua Blue, Purple, Dark Yellow, and Pinkish-Red.

Here are some of the stats:

No. of Installs: 75,788 installs
Rating: – (5)
Current version: v0.0.4 | 2/8/2022 | Free

Sublime Material Theme

This is simply a port to align the style of the theme with the default VSCode chrome that cannot be changed atm. It has both dark and light theme options, however it was last update long time ago, in 2016.

Dark Theme

Light Theme

Here are some of the stats:

No. of Installs: 568,813 installs
Rating: – (25)
Current version: v1.0.1 | 11/27/2016 | Free

There are lots of amazing themes in the marketplace and these are just few. Must have themes at least in my opinion. Maybe you have a better choice and if you have any let us know your favorite theme that make you more productive.

If you want to know about best VSCode extensions for 2022 then please read this article.

Top 11 Best VS Code Extensions you Need in 2022!

Whats-new, DigitalOcean

DigitalOcean New Pricing: July 2022

Posted on June 1, 2022June 1, 2022 by Febronei

01
Jun

Prices effective starting July 1, 2022

Users using DigitalOcean Droplets, Snapshots, Load Balancers, Floating IPs, and Custom Images will experience a change in prices starting from July 1, 2022. Details are below.

Introducing a new $4 Droplet

Droplet priced at $4/month with 1 vCPU, 512MB memory, 500GB bandwidth, and a 10GB SSD. The new Droplet is ideally suited for developers and teams learning new skills and creating proofs of concept and serves as a low-cost, effective graduation path from application development to production deployment.

Load Balancers

New monthly price for load balancers will be $12 per month per node.

Managed Kubernetes

Billed for the underlying resources used by their Kubernetes worker nodes, which could include Droplets, Block Storage, and Load Balancers. A Kubernetes cluster can be deployed for as little as $12 per month.

Only public outgoing transfers are considered for bandwidth billing. Transfer limits are calculated by pooling the transfer from all droplets on the account. Overages above pooled transfer will be charged at a rate of $0.01/GB.

Snapshots

New monthly price for Volume Snapshots is $0.06 per GiB per month and Droplet Snapshots is $0.06 per GB per month.

Floating IPs

Floating IPs will be free when assigned to a Droplet and will cost $5.00 per month when reserved but not assigned to a Droplet

Custom Images

Custom images are free to upload and charged at $0.06 GB per month to store.

Bandwidth Overages

No changes to bandwidth overage pricing. Each Droplet includes free outbound data transfer, starting at 500 GiB/month and scaling up. Outbound data transfer is shared between all Droplets each billing cycle. Additional transfer is billed at $0.01 per GiB.

Spaces

No change to Spaces pricing. The base rate of a Spaces subscription is $5.00 per month and gives you the ability to create multiple Spaces.

The subscription includes 250 GiB of data storage (cumulative across all of your Spaces). Additional storage beyond this allotment is $0.02 per GiB.

Spaces subscriptions include 1,024 GiB of outbound data transfer (from Spaces to the internet), which is shared between all Spaces. Additional outbound transfer is $0.01 per GiB.

Backups

No change to backups pricing. Enabling backups for a Droplet adds 20% to the cost of the Droplet.

Volumes

No change to Volumes pricing. Volumes cost $0.10 GiB per month and range from 1 GiB to 16 TiB (16,384 GiB). Charges accrue hourly for as long as the volume exists.

App Platform

No changes to App Platform pricing. Starts at $5.00 per month (for one container).

Flutter, Whats-new

What’s new in Flutter 3: May 2022

Posted on June 1, 2022June 1, 2022 by Febronei

01
Jun

Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

Fast

Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.

Try it in DartPad

Multi-Platform

Reach users on every screen

Deploy to multiple devices from a single codebase: mobile, web, desktop, and embedded devices.

See the target platforms

Developer Experience

Transform your workflow

Take control of your codebase with automated testing, developer tooling, and everything else you need to build production-quality apps.

Flutter for developers

Stable & Reliable

Trusted by many

Flutter is supported and used by Google, trusted by well-known brands around the world, and maintained by a community of global developers.

Explore the ecosystem

Flutter, Technology

What’s new in Flutter 3

Posted on May 18, 2022May 21, 2022 by Febronei

18
May

Introduction

Google announces Flutter 3. We all have been waiting for Material 3, Games Toolkit, macOS, Linux Support and Fordable Phone Support. Wait is over, finally it has arrived. Google and the open source community has put a lot of hard works to Flutter 2.0 and now they have released Flutter 3.0 with much more exciting features. Today we look into the new features that Flutter has in this major changes!

1. Flutter Firebase

A collection of tools is always necessary to have when building and launching applications. Data storage, cloud functions, authentication and app testing for different platform requires comprehensive third-party tools such as Firebase, AWS Amplify and AppWrite.

For example, Firebase is an amazing back-end platform backed by Google which accelerate app development process providing powerful backend infrastructure for the applications.

Flutter and Firebase work hand-in-hand to help you build web and mobile apps. This is not a surprise for any of us as we know both these products are belongs to one company, Google.

Majority of Flutter developers use Firebase in their apps. Over the last few releases Flutter team have been working with Firebase to expand and provide better integration for Flutter as a first-class integration. Flutter Crashlytics plugin helps to track real-time fatal errors with the same set of features through Firebase’s real-time crash reporting service. Firebase Crashlytics is a lightweight, realtime crash reporter that helps you track, prioritize and fix stability issues that erode your app quality.

2. macOS and Linux Support

According to a 2021 developer survey, Flutter is the most popular cross-platform mobile framework used by majority of global developers. Flutter desktop support is still far behind compared to mobile support specially in its early releases.

Flutter was stable for Windows in previous versions and now it supports both linux and macOS as well. Now you can build apps for all desktop platforms without ever worrying of breaking your code. You can build production ready applications for all platforms using flutter.

3. Mobile Updates

Smoother experience

Flutter apps now contribute 120Hz refresh rates that were previously limited to only 60Hz on iOS devices. This increase helps to have a smoother experience on iOS devices specially during animations.

Fordable Phone Support

Finally the newest release supports for fordable mobile devices. The new widgets and its core features will bring more natural experiences to fordable devices.

4. Web updates

Faster image decoding and scrolling

Flutter web now automatically detects and uses the ImageDecoder API in browsers that support it. As of today, most common browsers have added this API. Because of ImageDecoder API the image rendering for web is more efficient and the speed is twice faster than the previous versions. In overall the performance is major improvement for new update.

App lifecycle API

The new lifecycle API provides you flexibility to control over the Flutter framework. Now you can run Flutter apps in headless mode on the web. This gives you the flexibility to control the bootstrap process of your app from hosting HTML page, and check Lighthouse analysis for the performance of your app. For example you could preload the content while showing a login screen or a progress bar! You can get more information, Customizing web app initialization on docs.flutter.dev.

5. Material 3

Material 3 is known as the next generation of Material Design. Flutter 3 does not have full support for material 3 yet, only certain widgets support material 3. Flutter 3 provides opt-in support for Material 3. Maybe in future release, all the widgets might have material 3 support and could be the standard default for flutter.

6. Theme Extensions

Theme extension feature enable themes more convenient. It enables customizing theme by adding custom colors and custom color names to the flutter theme. You are not stuck with default colors that comes with flutter anymore. It is now much easier than ever to add our own color to flutter apps.

7. Flutter’s Games Toolkit

The Flutter team has released an easy-to-use casual games tool kit for casual gamers. It is a specialized starter kit of various templates which mean you can write your game code with Flutter casual Games Toolkit.

Now you can deploy casual games much quickly on multiple platforms. Flutter game repo has pre-integrated modules for in-app purchases, Ads & more. However if you want to develop 3D games, then flutter is not the right choice rather you want to go for Unity 3D.

8. Dart 2.17

Dart 2.17 stable was announced along with Flutter 3.0 with many long-awaited features that developers have been waiting for. Dart is the secret sauce behind Flutter, and any improvements in Dart would help improve Flutter’s development.

According to Dart and Flutter team, Dart 2.17 adds major new support for members on enums, refines how you can use named arguments in constructors, and makes code for forwarding parameters to superclasses much less verbose and repetitive. We will look into the new features of Dart 2.17 in more details in the coming articles.

Flutter, Technology, UI, VS Code

Create a Responsive Layout in Flutter

Posted on May 1, 2022May 21, 2022 by Febronei

01
May

Flutter is a powerful choice for web and mobile apps development. In Flutter, we can create a fully responsive designs for several platforms using one code base. As we all know a responsive design ensures the appeal of our application is consistent and gives users a seamless experience, no matter the size of the device. For example, when the screen size of the browser extends to a certain width the layout of the app will be changed.

In this short article, we’ll be covering how to create responsive designs in Flutter for web and mobile devices.

Getting Started

To begin, we’ll simply use the app we created in previous tutorial that looks like something like this👇.

💡 For simplicity we are using fixed numbers for screen resolution but when designing user interfaces for mobile apps, always avoid hardcoding numbers for widget sizes and instead utilize percentages. The MediaQuery class in Flutter may be used to do this.

Let’s work on coding…

Make a folder named layout and inside that create new file called layout.dart. Create a stateless widget for now, later we can use a stateful widget when we fetch dynamic contact from backend. We want to return a widget named ResponsiveLayout which helps in creating responsive layout. LayoutBuilder will give us a builder function which then return to us a context and constraints. Using constraints we can get the screen width.

Now create a file named dimensions.dart in the utils folder. Our web screen size starts at 600 resolutions so we will display web layout when the screen size is at 600 and above.

Now we want to create webScreenLayout and mobileScreenLayout widgets and accept these two widgets using a constructor as shown.

class ResponsiveLayout extends StatelessWidget {
  final Widget webScreenLayout;
  final Widget mobileScreenLayout;
  const ResponsiveLayout(
      {Key? key,
      required this.webScreenLayout,
      required this.mobileScreenLayout})
      : super(key: key);

We have accepted those two widgets via a constructor and we want to return those two widgets.

import 'package:flutter/material.dart';
import 'package:flutter_gradient_example/utils/dimensions.dart';

class ResponsiveLayout extends StatelessWidget {
  final Widget webScreenLayout;
  final Widget mobileScreenLayout;
  const ResponsiveLayout(
      {Key? key,
      required this.webScreenLayout,
      required this.mobileScreenLayout})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > webScreenSize) {
          return webScreenLayout;
        }
        return mobileScreenLayout;
      },
    );
  }
}

Now go to main.dart file and replace Center widget with ResponsiveLayout. We then import layout.dart file top of the main.dart file. Then pass both mobileScreenLayout and webScreenLayout as shown below.

It is time to create mobile_screen_layout.dart and web_screen_layout.dart file, so we can use these two widget on main.dart.

import 'package:flutter/material.dart';

class MobileScreenLayout extends StatelessWidget {
  const MobileScreenLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("This is Mobile Screen"),
      ),
    );
  }
}

We use same stateless widget in both the widget. Make this simple for now by displaying a text on the screen as shown.

import 'package:flutter/material.dart';

class WebScreenLayout extends StatelessWidget {
  const WebScreenLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("This is Web Screen"),
      ),
    );
  }
}

Now run the app in google Chrome and also in a mobile simulator. So we can test the app. For that run:

flutter run -d chrome

If you want to see it on iOS simulator then run:

open -a simulator

You will notice it is working as expected. When we reduce the chrome screen size to 600 and below it changes to mobile view.

Flutter, Technology, UI, VS Code

How To Add Your Own Color to a Flutter App

Posted on April 17, 2022May 21, 2022 by Febronei

17
Apr

Introduction

Learning Flutter is a great idea. Flutter is great if you want to build a career in mobile app development. I’ve planned to write short series based articles on the things I learned about flutter.

In this article, you will explore how to change the overall look across your apps with Flutter themes.

Step 1 — Setting Up the Project

To create a new flutter application simply run the following command. Oh do not forget to complete the installation process of flutter SDK, its prerequisites and the environment setup.

flutter create flutter_custom_theme_example

Flutter create command will give us a demo application that will display a simple clickable button which increment the numbers as we click the button. Now navigate to the new project directory that we just have created.

cd flutter_custom_theme_example

We need to see how our code looks like on the simulators. For that simply run the following code below. We want to enable hot reloading so it reflects the changes as we make to our code.

open -a simulator

Now that you have a working boilerplate Flutter application. It is the time to add customization to the app.

Step 2 — Customize Global Themes

Create a new folder named utils inside lib folder. Create a new file colors.dart inside utils.

import 'package:flutter/material.dart';

const mobileBackgroundColor = Color.fromRGBO(0, 0, 0, 1);
const mobileSearchColor = Color.fromRGBO(38, 38, 38, 1);
const blueColor = Color.fromRGBO(0, 149, 246, 1);
const primaryColor = Colors.white;
const secondaryColor = Colors.grey;

Now we have created a color style globally for our application which can be used anywhere in our app. Open main.dart file and remove all the code given by flutter by default.

We want add dark theme to our app, therefore add dark theme using themeData given by flutter. Next add Scaffold widget to the main.dart file. Now we can see it has changed to default dark color provided by flutter team.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Custom Color Example',
      theme: ThemeData.dark(),
      home: Scaffold(body: Text('Flutter custom color example')),
    );
  }
}

We want a different colors, so this is the point we want to use colors.dart file created earlier so that we can use our own dark theme colors. Import colors.dart file inside our main.dart file. Then add our custom color to themeData shown below code.

import 'package:flutter/material.dart';
import 'package:flutter_custom_theme_example/colors.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Custom Color Example',
      theme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: mobileBackgroundColor,
          primaryColor: secondaryColor),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter custom color example'),
        ),
        body: Center(
            child: Text(
          'Flutter custom color example',
        )),
      ),
    );
  }
}

Thats it! Now we have added our own custom colors to the flutter app. Yes this is very basic styling however in future tutorial we can add more styles and colors to flutter apps. You can find full code in this Github repo.

Flutter, Technology, UI

How to Create a Gradient AppBar in Flutter

Posted on April 10, 2022May 21, 2022 by Febronei

10
Apr

The gradient color trend is extremely versatile.

Introduction

If you want to feel a different and modern look in your apps then the go for choice is gradient color. The blend of different shades of color, gradient creates a completely unique feelings to the modern designs. Companies such as ,Hulu, Spotify, Airbnb and Laracast often use gradient colors in their products.

This article will teach you how to add and customize these gradient designs into your Flutter app. There are plugins for this to achieve, however we want to implement same exact feature without using any third-party plugins.

So lets begin…

Step 1 — Setting Up the Project

To create a new flutter application simply run the following command. Please make sure to complete the Prerequisites for any flutter project if you are running this command for the first time.

flutter create flutter_gradient_example

Navigate to the project directory you just created:

cd flutter_gradient_example

Step 2 — Using LinearGradient

Open main.dart with your code editor and modify the boilerplate code provide by flutter team. We write most of the our code on this file. We are using simple statelessWidget since there is not state management that we need to take care of.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Gradient AppBar',
        home: HomePage());
  }
}

In the code below, you will notice we have used Scaffold and AppBar widgets. With these two widgets we are able to create an AppBar on top of our app.

Now use flexibleSpace property, so we can use a Container widget for a gradient layout. There are various kind of gradient but in this case we will use linear gradient method. It is also possible to have additional colors but in this example we are using only red and orange color.

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // implement the app bar
      appBar: AppBar(
        title: const Text('Gradient AppBar'),
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [Colors.red, Colors.orange]),
          ),
        ),
      ),
    );
  }
}

Step 2 — Run the emulator

Compile your code and have it run in an emulator. You will see gradient AppBar on your app.

Thats it. Now you have achieved gradient AppBar in your flutter app. You can find full code in this Github repo.

Designing, Technology

Banking App UI

Posted on August 8, 2021May 21, 2022 by Febronei

08
Aug

Description

A money management ui designed in flutter. This mockup includes only home screen.

Source code Github