DEV Community: Ali Riza Reisoglu

VSCode Tips & Tricks for Flutter Projects

Ali Riza Reisoglu — Tue, 29 Jun 2021 11:14:30 +0000

Turn your Flutter VSCode setup from zero to hero with these tips & tricks.

Introduction

VSCode has many features and extensions to make your Flutter Project development process much easier, neat, and fun. In this article we are going to explore the tips & tricks that I use in all of my projects.

Add Flutter UI Guidelines

This built-in VSCode feature will give your Dart code a tree-like view. When the feature is turned on, it draws an indentation line from the parent widget to its child or its children that increases the readability of the code drastically while building a UI Widget tree.

To implement it, simply go to VSCode settings and search for

Dart:Preview Flutter Ui Guides

and check its box.

Duplicate a section without copy & paste

A much faster way than copying and pasting a section for multiple purposes is duplicating it with the VSCode shortcut.

Select the lines to duplicate, press 'option + shift + down or up arrow key' (Shift+Alt + ↓ / ↑ in Windows) to create the same section right under the original one.

Use Quick Fix

The Quick Fix options are a lifesaver when you know when and where to use it.

Let's run through from the most common use cases to the least known ones.

Double click to the name of a Widget to get suggestions to;
- Wrap the widget with another Widget
- Wrap the widget with Center
- Wrap the widget with Container
- Wrap the widget with Padding
- Wrap the widget with StreamBuilder
- Extract the widget as a local variable
- Extract the widget as a Custom Widget

Please note that some options in this example come with BloC extension, if you do not see all of it do not worry at all.

Select the whole widget to get suggestions to;
- Wrap the widget with Column
- Wrap the widget with Row
- Extract the widget as a local method

It can also be used to wrap the widget or widgets with a Stack widget. Just wrap the widget with a Column or a Row, then rename it to Stack.

Important thing is to exclude the trailing comma at the end of the widget if you successfully like to extract the widget as a local method.

Generate a class constructor

Bonus: If you have Dart Data Class Generator extension you can also generate JSON model of the classes easily.

Turn normal functions into Async

A pretty straightforward but really useful tip to convert any normal function into async function in an instant.

In normal function, after you specify await, hit the Quick Fix icon and press 'add async modifier' and Voilà.

See the dependency Chain of a Specific Package

This brand-new feature has been introduced by VSCode Dart & Flutter extension, and it helps you to see the shortest path to the dependency. It works similarly like the command dart pub deps where you see the chain of all dependencies.

To use this feature, open up the dependencies tab in your project and hover into a dependency that you would like to see its path.

See errors faster with Error Lens

How convenient would it be to see the error right where it actually occurs? I guess it would be super convenient and this extension highlights the errors in your code on its original line.

Installing the extension will be more than enough to show the errors and no more adjustment is required.

Add packages inside the VSCode with Pubspec Assist

It is as fast as your typing speed to add dependencies and packages to your project by the help of this extension.

Install __'Pubspec Assist' extension to VSCode, press 'cmd + shift + p' (or ctrl + shift + p on Windows) to bring up the command menu and either choose to add dependencies or dev dependencies to pubspec.yaml.

Once you type the name of the library, if the name perfectly fits the library is installed immediately, or if the name is closer to the actual package name, the extension will show all the related packages to choose from.

Android IOS Emulator Extension

With this extension, it is extremely fast to fire up your emulator of choice and start debugging immediately.

Install 'Android IOS Emulator' extension. Specify the path of your emulator into the settings and that's it.

Default: "emulator.emulatorPath": "~/Library/Android/sdk/emulator"
Mac: "emulator.emulatorPathMac": "~/Library/Android/sdk/emulator"
Linux: "emulator.emulatorPathLinux": "~/Android/Sdk/emulator"
Windows: "emulator.emulatorPathWindows":
    "<yourAndroidHome>\\Sdk\\emulator\\emulator.exe"
    or
    "C:\\Users\\<yourUsername>\\AppData\\Local\\Android\\Sdk\\emulator\\emulator.exe"

An emulator icon will appear after the installation. Pressing on it will reveal all the available emulator options.

In order to use the Android emulator, you still need Android Studio installed and for IOS emulator you need XCode installed as well.

Start Build Runner on Status Bar

This one is for easier code generation. If you use code generation frequently in your projects, then you can generate and watch generated code with one click.

The original extension is called 'flutter_mobx' and it has awesome snippets and features for MobX state management, however you can even use it for only it's build_runner button.

All you need to do is to search and download for 'flutter_mobx' and the button will appear automatically down in your status bar.

After installation, a simple click on it will generate the code after couple of seconds.

In the end the best tip would be to use the feature or package that feels the most natural. These things are out there to make your development process easier and faster, if any of the tips are going to help you out in this context, then I would be more than content. Happy coding, and please reach out to me if you have any other suggestions.

You can follow me on Twitter and stay up to date with weekly Flutter tutorials.

Creating PDF files with Multiple Images in Flutter

Ali Riza Reisoglu — Tue, 25 May 2021 17:44:19 +0000

Introduction

This step-by-step tutorial will guide you on how to create and view a PDF file with multiple images.

It is a relatively easy process once you know the methods, and I will show you how to become natural for creating a pdf file in your projects.

For this tutorial, there are three essential packages needed.

pdf ⇒ To create PDF documents
path_provider ⇒ to retrieve the document directory
syncfusion_flutter_pdfviewer ⇒ to view the created PDF files

Let's begin by either creating a new project or adding these dependencies to your current project setup.

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.0.1
  pdf: ^3.3.0
  syncfusion_flutter_pdfviewer: ^19.1.64-beta

1. Creating a Simple PDF file

Inside the lib folder let's create a new page called pdf_screen.dart.

And inside the file create a StatefulWidget named PdfScreen.

class PdfScreen extends StatefulWidget {
  @override
  _PdfScreenState createState() => _PdfScreenState();
}

class _PdfScreenState extends State<PdfScreen> {
  String pdfFile = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Visibility(
              visible: pdfFile.isNotEmpty,
              child: SfPdfViewer.file(File(pdfFile),
                  canShowScrollHead: false, canShowScrollStatus: false),
            ),
            TextButton(
                onPressed: () {
                },
                child: Text('Create a Pdf')),
          ],
        ),
      ),
    );
  }
}

A simple UI where we have a text button to create a PDF file for us and a Visibility widget to reveal the PDF viewer once the PDF file is created.

For viewing the PDF files, we are going to use the syncfusion_flutter_pdfviewer package's SfPdfViewer.file widget, and inside this widget we are going to create a file that has the path of the pdf that we have created.

Next, we are going to create 2 methods.

createPdfFile
savePdfFile

PDF package has its own widget catalog and in order to call these catalogs, we need to import the pdf widgets as a variable named pw.

import 'package:pdf/widgets.dart' as pw;

To build a PDF layout, we are going to call the widgets by simply calling them pw.<WidgetNme>'.

In order to save a pdf file, we must create a pw.Document(). This special widget will hold the information of the created PDF, thus let's create a variable inside the _PdfScreenState.

var pdf = pw.Document();

Here in the example, the idea is to create a MultiPage PDF with an a4 format. Based on the number of images we are going to add, the number of pages might be more than one, therefore it makes sense to create a MultiPage widget right now.

Inside the build method of the MultiPage widget, there will be Column with a Header and Divider to divide the content from the header. In the next steps, we are going to add the content under the Divider inside this Column.

createPdfFile() {
    pdf.addPage(pw.MultiPage(
        margin: pw.EdgeInsets.all(10),
        pageFormat: PdfPageFormat.a4,
        build: (pw.Context context) {
          return <pw.Widget>[
            pw.Column(
                crossAxisAlignment: pw.CrossAxisAlignment.center,
                mainAxisSize: pw.MainAxisSize.min,
                children: [
                  pw.Text('Create a Simple PDF',
                      textAlign: pw.TextAlign.center,
                      style: pw.TextStyle(fontSize: 26)),
                  pw.Divider(),
                ]),
          ];
        }));
  }

Afterward, let's create savePdfFile method.

It is an asynchronous method that awaits the directory of the platform of IOS or Android.

Later, the method creates a file with the name of the ID and the documentPath of the directory. You can name your file however you'd like but for multiple PDF creation, it is better to have unique names for each PDF file created.

Lastly, the method saves the PDF as a file.path and the value is given to the pdfFile variable inside the setState method to later update the UI.

savePdfFile() async {
    Directory documentDirectory = await getApplicationDocumentsDirectory();

    String documentPath = documentDirectory.path;

    String id = DateTime.now().toString();

    File file = File("$documentPath/$id.pdf");

    file.writeAsBytesSync(await pdf.save());
    setState(() {
      pdfFile = file.path;
      pdf = pw.Document();
    });
  }

Important note: It is essential to assign pw.Document() to the pdf variable once again after saving a pdf file. If not done, the pdf will try to create another one on top of the previously created pdf file and that will cause a faulty pdf document to be created.

Bonus: If you want to save your PDF file in bytes you can use the method below.

  List<int> pdfBytes;

    pdfBytes = await file.readAsBytes();

    pdfFile base64Encode(pdfBytes);

Furthermore, create an async onPressed method.

In order to save a file, we need to await createPdfFile method first.

 onPressed: () async {
                  await createPdfFile();
                  savePdfFile();
                },

Ok, now everything is set. You can press the 'Create a Pdf' button to see your first simple PDF file.

2. Adding an Image

In the pdf package, you can add an Image with pw.MemoryImage. For this reason, we need to convert the images to Memory bytes.

Initially import packages below.

import 'dart:typed_data';
import 'package:flutter/services.dart';

After that, convert createPdfFile into an async method and add these two variables.

the First variable converts an asset image into bytes
the Second variable converts the bytes into a list of Uint8List bytes

    final ByteData bytes = await rootBundle.load('assets/images/kitten.png');
    final Uint8List byteList = bytes.buffer.asUint8List();

Then add a pw.Image widget under the Divider.

  pw.Image(
                pw.MemoryImage(
                  byteList,
                ),
                fit: pw.BoxFit.fitHeight)

MemoryImage takes byteList as a positional argument to render the image into the pdf file.

Hot restart the application now and try to create another PDF file to see a file with an image inside it.

3. Adding Multiple Images

In the final step of the tutorial, we are going to create a pdf build method that can generate a file with given multiple images.

To start with, we need to create a method that converts images to the Uint8List format.

Inside the state widget, create an empty list for storing images as Uint8list.

List<Uint8List> imagesUint8list = [];

Next, let's refactor the createPdfFile method and extract a new method for getting bytes of images.

 getImageBytes(String assetImage) async {
    final ByteData bytes = await rootBundle.load(assetImage);
    final Uint8List byteList = bytes.buffer.asUint8List();
    imagesUint8list.add(byteList);
  }

Now we will create a list of type pw.Widgets inside createPdfFile method that generates a Column with an image header and image itself.

final List<pw.Widget> pdfImages = imagesUint8list.map((image) {
      return pw.Padding(
          padding: pw.EdgeInsets.symmetric(vertical: 20, horizontal: 10),
          child: pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisSize: pw.MainAxisSize.max,
              children: [
                pw.Text(
                    'Image'
                            ' ' +
                        (imagesUint8list
                                    .indexWhere((element) => element == image) +
                                1)
                            .toString(),
                    style: pw.TextStyle(fontSize: 22)),
                pw.SizedBox(height: 10),
                pw.Image(
                    pw.MemoryImage(
                      image,
                    ),
                    height: 400,
                    fit: pw.BoxFit.fitHeight)
              ]));
    }).toList();

Note: It is crucial to give a specific max size to image widgets, otherwise one image might overflow from the page format leading to a failed pdf creation.

In the final step, createPdfFile is going to first create a for loop to convert images into Uint8List.
Later it will create a list of images with headers.
Lastly, the pdfImages will be displayed inside the main column of the pdf as its children.

 createPdfFile() async {
    //convert each image to Uint8List
    for (String image in assetImages) await getImageBytes(image);
    //create a list of images
    final List<pw.Widget> images = imagesUint8list.map((image) {
      return pw.Padding(
          padding: pw.EdgeInsets.symmetric(vertical: 20, horizontal: 10),
          child: pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisSize: pw.MainAxisSize.max,
              children: [
                pw.Text(
                    'Image'
                            ' ' +
                        (imagesUint8list
                                    .indexWhere((element) => element == image) +
                                1)
                            .toString(),
                    style: pw.TextStyle(fontSize: 22)),
                pw.SizedBox(height: 10),
                pw.Image(
                    pw.MemoryImage(
                      image,
                    ),
                    height: 400,
                    fit: pw.BoxFit.fitHeight)
              ]));
    }).toList();

    //create PDF
    pdf.addPage(pw.MultiPage(
        margin: pw.EdgeInsets.all(10),
        pageFormat: PdfPageFormat.a4,
        build: (pw.Context context) {
          return <pw.Widget>[
            pw.Column(
                crossAxisAlignment: pw.CrossAxisAlignment.center,
                mainAxisSize: pw.MainAxisSize.min,
                children: [
                  pw.Text('Create a Simple PDF',
                      textAlign: pw.TextAlign.center,
                      style: pw.TextStyle(fontSize: 26)),
                  pw.Divider(),
                ]),
            pw.Column(
                crossAxisAlignment: pw.CrossAxisAlignment.center,
                mainAxisSize: pw.MainAxisSize.max,
                children: pdfImages),
          ];
        }));
  }

One more step is to wrap the visibility widget with SingleChildScrollView and Expanded widgets.

 Expanded(
              child: SingleChildScrollView(
                child: Visibility(
                  visible: pdfFile.isNotEmpty,
                  child: SfPdfViewer.file(File(pdfFile),
                      canShowScrollHead: false, canShowScrollStatus: false),
                ),
              ),
            ),

Now let's press the button one last time to create a PDF file with multiple images...

That's it!

Furthermore, I highly recommend checking the widget library of the PDF package in their official API documentation.

You can follow me on Twitter and stay up to date with weekly Flutter tutorials.

Also, here is the github repository for the source code of this project.

Custom Neumorphic Shapes in Flutter

Ali Riza Reisoglu — Sat, 15 May 2021 14:55:03 +0000

Learn how to create beautiful looking neumorphic custom shapes in Flutter applications with the help of the Flutter Shape Maker tool and CustomPaint widget.

Introduction

A good design is an essential part of a good mobile application. Honestly, a developer doesn't have to concern about a good design. Still, if you are interested in some kind of UI that stands out your home page or if you are just interested in building UI with a style, then It is a good practice to follow the design trends.

Besides, having design knowledge as a developer will always always be welcomed in any team of developers.

Or without a one, you might end up having a functionally working abomination like this...

In this tutorial, I am going to explain what is neumorphic design and how to implement it in your Flutter applications.

For this reason, let's have a quick look at what neumorphism is all about.

Neumorphic Design

Neumorphic design example by Mary Tokar on dribble.

Neumorphism has become one of the hottest mobile design trends in 2020, and it still keeps its popularity throughout 2021.

It is a design trend that is focused on creating solid-looking components with the help of colors, low contrast, and shadow effects.

The way the style is implemented gives the user the feeling of depth where the components look like they are actually inside the background but not just placed on it.

The main ingredient for this style is making sure that your element and your background are the same exact color. This is so that we can then create the feel that these components are coming out from inside the background, using shadowing to create the protruding look.

In addition, for the shadow game to work, your background can’t be fully black or plain white.

You’ll need some sort of color, in order for the shadow to deliver on the visual trick. Once you have the main color, you can then look for two shadows: dark and light shadow.

Dark and light shadow on the main color creates this elevated or embedded feeling to your component, and it is the final key information to know when creating neumorphic shape.

Furthermore, check out this interactive neumorphism generator to experiment with shadows and colors.

Creating a Custom Neumorphic Shape In Flutter

Now It is time to put the information into practice.

In order to create custom Neumorphic Shapes in Flutter, we are going to use a Web App called 'Flutter Shape Maker' and a Flutter package called 'flutter_neumorphic'.

Creating a Custom Shape

In Flutter the most popular way of creating a custom shape is to use the CustomPaint widget. It basically helps the developer to create any kind of shape with an exchange of some kind of headache.

As you may know, there is always someone out there to make things easier for the rest of the Flutter developers, and RetroPortal Studio is one of them who created this super useful website to create CustomPaint shapes easily.

Now let's head over to Flutter Shape Maker website.

You will see that there are two methods.

The first one is to create any given SVG image to a CustomPaint code.

The second one is to create your own shape.

In this tutorial I am going to create a custom button that looks like a minimalist cloud...at least I will try...

You can either experiment on your own or, head over to this tutorial by the creator of this application to further understand how to create a custom shape.

Alright, mine is done and doesn't look that bad. After you finish creating the shape as well, click on the Get Code button on the right-side panel and copy the custom painter code.

The next step is to add the custom shape code to your existing project or a new flutter project.

Create a new file called custom_shape.dart inside the lib folder and paste the code inside the file.

Inside the RPSCustomPainter class, change the style to fill the shape.

 ..style = PaintingStyle.fill

It's done. Now you can create a CustomPaint widget in your dedicated screen and wrap it with a Container to give the preferred size.

  Container(
              width: 600,
              height: 300,
              child: CustomPaint(
                painter: RPSCustomPainter(),
              ),
            )

Implementing Neumorphism Package

Let's begin by importing the neumorphic package to pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  flutter_neumorphic: ^3.1.0

Before making the necessary implementations, you can head over to the package's original API documentation to see all the different shapes and features that this package provides. In this tutorial, we are only going to go through the custom shape implementation.

First, we need to create a NeumorphicPathProvider that provides the custom shape into the Neumorphic widget.

In order to do that, go to custom_shape.dart and create the class below.

class MyShapePathProvider extends NeumorphicPathProvider {
  @override
  bool shouldReclip(NeumorphicPathProvider oldClipper) {
    return true;
  }

  @override
  Path getPath(Size size) {
    Path path_0 = Path();
    //paste your path here
    return path_0;
  }

  @override
  bool get oneGradientPerPath => false;
}

Copy the path from RPSCustomPainter and paste it.

class MyShapePathProvider extends NeumorphicPathProvider {
  @override
  bool shouldReclip(NeumorphicPathProvider oldClipper) {
    return true;
  }

  @override
  Path getPath(Size size) {
    Path path_0 = Path();
    path_0.moveTo(size.width * 0.6655556, size.height * 0.3980000);
    path_0.cubicTo(
        size.width * 0.6644444,
        size.height * 0.4985000,
        size.width * 0.6111111,
        size.height * 0.4985000,
        size.width * 0.6077778,
        size.height * 0.5000000);
    path_0.quadraticBezierTo(size.width * 0.5541667, size.height * 0.4915000,
        size.width * 0.5555556, size.height * 0.4500000);
    path_0.quadraticBezierTo(size.width * 0.5555556, size.height * 0.4950000,
        size.width * 0.5011111, size.height * 0.4960000);
    path_0.quadraticBezierTo(size.width * 0.4447222, size.height * 0.4960000,
        size.width * 0.4433333, size.height * 0.4460000);
    path_0.quadraticBezierTo(size.width * 0.4425000, size.height * 0.4955000,
        size.width * 0.3888889, size.height * 0.4960000);
    path_0.quadraticBezierTo(size.width * 0.3352778, size.height * 0.4955000,
        size.width * 0.3300000, size.height * 0.3980000);
    path_0.quadraticBezierTo(size.width * 0.3352778, size.height * 0.3020000,
        size.width * 0.3888889, size.height * 0.3020000);
    path_0.quadraticBezierTo(size.width * 0.4450000, size.height * 0.3025000,
        size.width * 0.4444444, size.height * 0.3520000);
    path_0.quadraticBezierTo(size.width * 0.4466667, size.height * 0.3035000,
        size.width * 0.5022222, size.height * 0.2980000);
    path_0.cubicTo(
        size.width * 0.5547222,
        size.height * 0.3035000,
        size.width * 0.5575000,
        size.height * 0.3465000,
        size.width * 0.5566667,
        size.height * 0.3440000);
    path_0.quadraticBezierTo(size.width * 0.5583333, size.height * 0.3015000,
        size.width * 0.6122222, size.height * 0.3020000);
    path_0.quadraticBezierTo(size.width * 0.6655556, size.height * 0.3040000,
        size.width * 0.6655556, size.height * 0.3980000);
    path_0.close();
    return path_0;
  }

  @override
  bool get oneGradientPerPath => false;
}

Once you are done, head back to CustomPaint widget and wrap with the Neumorphic widget.

Now it is time to stylize and create the neumorphic feeling.

Stylize your shape

Inside Neumorphic widget, add the style property and assign it to a NeumorphicStyle.

 style: NeumorphicStyle(
                    shape: NeumorphicShape.flat,
                    boxShape: NeumorphicBoxShape.path(MyShapePathProvider()),
                    intensity: 0.7,
                    depth: 8,
                    lightSource: LightSource.topLeft,
                    shadowDarkColor: Colors.grey[700],
                    shadowLightColor: Colors.grey[50],
                    color: Colors.grey[400],

These are the most essential properties for stylizing your neumorphic shape. Let's briefly look at all of them.

Shape: Flat, convex, or concave
boxShape: This is where we are going to add our MyShapePathProvider in order to create the custom shape
intensity: the amount of light and dark shadow intensity / double 0.0 to 1.0
surfaceIntensity: The convex and concave shape intensity. (not necessary for flat shapes) / double 0.0 to 1.0
depth: the value to determine how close the shape to the background. minus values for inside, positive values are for outside the background feeling / double -20 to 20
lightSource: the position where the light should shine upon the shape
shadowLightColor / shadowDarkColor : self-explanatory
color: Color of the neumorphic shape

Remember, we need to have the same background and shape color to be able to create neumorphic feeling. For that reason, change the background color of the scaffold, the color of NeumorphicStyle, and the color of the RPSCustomPainter to Colors.grey[400].

Assign the boxShape values as in the example NeumorphicStyle class above.

                    boxShape: NeumorphicBoxShape.path(MyShapePathProvider()),

If you have used Colors.grey[400], then for dark and light shadow colors you can use the tones of grey color as in the example above as well.

                    shadowDarkColor: Colors.grey[700],
                    shadowLightColor: Colors.grey[50],

To finalize your style, you can play around with depth, intensity, and lightSource values.

In my case, the image below has a flat shape with 0.7 intensity, 8.0 depth, and topLeft light source.

That's it! Congratulations on creating an amazing-looking custom shape with neumorphic style.

You can follow me on Twitter and stay up to date with weekly Flutter tutorials.

Also, here is the github repository for the source code of this project.

MobX: Flutter State Management like a Boss

Ali Riza Reisoglu — Fri, 07 May 2021 10:38:55 +0000

This guide will teach how to control the State of the UI within the Flutter applications using MobX state management.

If you are someone who is interested in Flutter, by now you should have heard about the State Management phrase a couple of times. In fact, as a Flutter developer, this term becomes part of your daily life.

Even though it seems difficult in the beginning and the term itself gained a reputation for being complicated, it will get easier to get a grasp on it once you understand what is the State, and why do we have to manage it?

What is the State?

To understand the term State, we must first understand how Flutter builds the User Interface.

Flutter is a declarative framework. This means that every time there is a change on your screen, the framework itself re-draws the screen to show the changes. Video games are declarative as well and this is one of the main reasons you need a good graphics card to process and re-draw all the momentary changes in the UI.

In a declarative framework, the code is stable. But something has to change for UI to be re-built, and that is the 'Data'. In addition, this data change itself is called the 'State' of the app.

In other words, if the color of a container widget changes when you press a button, the widget itself stays stable whereas the data changes with the given color value when the button is pressed.

There are two types of state;

Ephemeral state(sometimes called UI state or local state) ⇒ is the state you can neatly contain in a single widget.
App state⇒ is the state that you want to share across many parts of your app.

The ephemeral state is being handled by good old StatefulWidget. For further information about StatelessWidget and StatefulWidget, you can head over to the original documentation.

In our case, the App state such as theme change or authentication status is where Flutter requires a State Management solution. There is no magical StatefulApp widget or something similar, for this reason, we need a solution. And this is where MobX enters the scene...

I know it is a lot to take in. As much as it sounds boring by now, it is also very crucial to learn the fundamentals to be natural with state management.

Meet the MobX

In the official documentation, the definition of Mobx is a simple way to connect the reactive data of your application with the UI. As simple as it may sound, there are a couple of key concepts and terms one should know to understand how MobX works behind the curtains.

There are 3 main concepts in Mobx

Observables
Actions
Reactions

Observables are properties, entire objects, arrays, Maps, and Sets. In short every field that holds information that can change the state.
Actions are methods that change, modify or delete these observables. For now, let's say all the functions are called actions.
Reactions are a way of creating side effects based on the changes in observables.

To picture this vividly, let's imagine an observable that is a water cup. Action is to pour water into the cup that changes its state. A reaction would be water spilling when there is more water than the cup can hold.

Last but not least, we should also note there is one more concept called Computed. It is not a reaction, nor action, but it is an automatic process to derive new information from observables.

In the water cup example, if we want to know what is the weight of the water cup, we can use a computed. It is not an action because it does not modify the cup, it is not a reaction because the weight of the cup is not an effect, but a value only based on the observable.

There has been a lot to take in. Before we give up and close the page, let's refresh ourselves a bit...

By default, Mobx state management uses a concept called stores. These stores hold the observables, actions, reactions, and computed. In addition, these stores can be accessed by providing them into the UI layer with Provider state management tool.

For now, it is enough to know that stores are like the business logic vaults that hold necessary information to modify the state of the UI.

Well, enough information... Let's jump straight into the real-life usage of Mobx state management.

1. Creating a store.

First, let's install the necessary packages and extensions.

Inside pubspec.yaml file, add these dependencies.

dependencies:
  flutter_mobx: ^2.0.0
  mobx: ^2.0.1
  provider: ^5.0.0

dev_dependencies:
  build_runner: ^1.12.2
  mobx_codegen: ^2.0.1+3

Note: The version of these packages might change, so please get the latest version from the pub.dev.

Next, install flutter_mobx extension.

In this example, we are going to use MobX to modify the state of the famous Counter app that we are all familiar with.

In order to do that, first, we will create a folder to hold the Store.

Create a folder named counter_store inside Lib. Then create a file called counter_store.dart.

Next, paste this boilerplate code directly inside the file.

import 'package:mobx/mobx.dart';
part 'counter_store.g.dart';

class CounterStore = _CounterStoreBase with _$CounterStore;

abstract class _CounterStoreBase with Store {

}

As you can see, there is a compile error because there is a missing file. The file has to be generated.

Important note: MobX works with generated code. Any installation or change inside the stores needs code generation. To generate the code is to run build_runner.

Open up the terminal and paste the lines below.

flutter packages pub run build_runner watch --delete-conflicting-outputs

The key to work with MobX state management is to keep the build_runner working on the backside so that it can generate the code on the go. For this reason, instead of using "build_runner build", we are using "build_runner watch".

Once you see all the problems disappear, we can head to the next step.

2. Injecting the Store

This is another necessary process. It is to inject the store into the widget tree. In order to do that we are going to use the Provider package/

Head to lib → main.dart

Inside MyApp widget, create a CounterStore object with the code below.

 final CounterStore _counterStore = CounterStore();

Next, wrap the MaterialApp with a provider and inject the CounterStore.

class MyApp extends StatelessWidget {
  CounterStore _counterStore = CounterStore();
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
    providers: [
    Provider<CounterStore>(create: (_) => _counterStore),
    ],
          child: MaterialApp(
        title: 'Flutter Mobx Tutorial',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter Mobx Tutorial'),
      ),
    );
  }
}

3. Adding Store Elements.

The preferred way of creating store objects is to first create the observables.

Let's create counter variable.

@observable
  int counter = 0;

Now, we can create an action to increment the value of the counter.

 @action
  void incrementCounter() {
    counter++;
  }

4. UI Layer & Observer

Until now, we created a store, injected it into the widget tree, added the observables and actions. So now it is time to use them in the UI layer.

In order to use the store inside the MyHomePage widget, we need to call the instance of the store. In the _MyHomePageState let's create the instance.

CounterStore _counterStore;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _counterStore = Provider.of<CounterStore>(context);
  }

Now we can use the _counterStore to call the observables and actions from the store.

Change the _counter to _counterStore.counter

  Text(
   '${_counterStore.counter}',
   style: Theme.of(context).textTheme.headline4,
  ),

and onPressed function,

onPressed: _counterStore.incrementCounter,

That's it. Seems like we can smash the button to increment the counter now.

Oh...it kinda works, but why can't we see the numbers incremented?

Well, it is because we still need to implement one of the most essential parts of the Mobx.

Enter Observer...

The observer is a Mobx reaction that watches an observable in UI, and makes the necessary state updating automatically as soon as there is a change on observable.

The observer is basically your eyes in the example of a water cup that watches the changes in the water cup and notifies your brain to update the state of the water cup that you observe.

Alright, let's put the observer in action.

It is very simple. Just wrap the widget with an observer that you want it to be observed.

Click on the widget name, in this case, Scaffold, and click on the light bulb and choose Wrap with Observer.

Your code should look like this now.

 @override
  Widget build(BuildContext context) {
    return Observer(builder: (_) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '${_counterStore.counter}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _counterStore.incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      );
    });
  }

Now, the final moment that we all been waiting for...but let's first hit hot restart.

Ok, press the increment button...and voilà!

What's next?

This concludes the tutorial for now. Please note that what we learned is just scratching the surface of what MobX can do. In the upcoming articles, I intend to grasp advanced concepts such as reactions, computed, and ObservableLists, however with this knowledge you can pretty much modify the state of simple applications.

For more examples and guides you can see the original documentation.

Now go out there and start making amazing projects of your own!

Here is the github repository to see the full code.

Plus, you can find me on twitter and say hi!

Dark Theme for Flutter Applications

Ali Riza Reisoglu — Thu, 29 Apr 2021 10:46:59 +0000

This tutorial will explore how to implement Dark Theme in the Flutter applications and update the State of the UI with Provider State Management Tool.

Introduction

One of my favorite features in modern-day applications is the dark theme, and I am sure most of you can relate to the pain of looking at a bright light screen in the middle of the night. Dark theme is good for the eyes, it looks pretty cool, it opens unlimited possibilities for Star Wars references, and it is unbelievably easy to implement. So, let's discover the secrets of the dark theme...

In this tutorial, we are going to go ahead and start by creating a new blank project. In case you would like to know how to create a new Flutter project, check out the official documentation.

Building the UI

After creating the new project, let's implement a basic UI layout to understand how dark & light theme works. Now create a file named dark_theme_page.dart inside the lib folder.

flutter-app/
|- android
|- build
|- ios
|- lib/
    |- dark_theme_page.dart
    |- main.dart
|- test

Next, add a StatefulWidget named DarkThemePage inside the file.

 class DarkThemePage extends StatefulWidget {
  @override
  _DarkThemePageState createState() => _DarkThemePageState();
}

class _DarkThemePageState extends State<DarkThemePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Base Screen'),
      ),
      floatingActionButton: FloatingActionButton(onPressed: (){}),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.brightness_5,
            ),
          ),
          Center(
            child: Text(
              'Text color will change with the theme',
            ),
          )
        ],
      ),
    );
  }
}

Now go ahead and replace the MyHomePage widget with DarkThemePage inside MaterialApp in main.dart.

The screen is set. In the next step, we will implement functionalities one by one.

ThemeData class

From the official documentation;
Defines the configuration of the overall visual Theme for a MaterialApp or a widget subtree within the app.

Flutter handles the overall theme of the app under theme property in MaterialApp widget. Theme property takes one argument that is a ThemeData class. This class has all the properties that can be customized to create an overall theme for the applications from text styles to variety of colors.

So in general, we are going to create a logic that when pressing a button, we are going to run a boolean function that says if the theme is dark then use themeData for dark theme, if not use themeData for light theme. This also means that you can create and implement multiple themes on your own once you create, define and customize a theme under ThemeData class.

For this reason, let's create themeData classes to create light & dark themes.

Inside the lib folder, create a new file called theme_data.dart.

flutter-app/
|- android
|- build
|- ios
|- lib/
    |- theme_data.dart
    |- dark_theme_page.dart
    |- main.dart
|- test

In here let's create two ThemeData classes. One for light and one for dark theme.

final ThemeData themeDataLight = new ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.orange,
    primaryColor: Colors.orange[500],
    primaryColorBrightness: Brightness.light,
    scaffoldBackgroundColor: Colors.grey[200],
    accentColor: Colors.purple[500],
    accentColorBrightness: Brightness.light);

final ThemeData themeDataDark = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.red,
  primaryColorBrightness: Brightness.dark,
  scaffoldBackgroundColor: Colors.grey[850],
  accentColor: Colors.blue[500],
  accentColorBrightness: Brightness.dark,
);

ThemeData class comes with tons of properties that can be customized to create a unique theme for the applications. In this example, we are going to cover the most important ones.

brightness: Defines the default textStyle color for the text.
primaryColor: The main color that is going to be used inside the app
primarySwatch: This property acts as the primaryColor, and further it uses different shades of the given color in different areas
primaryColorBrightness: Used to determine the color of text and icons placed on top of the primary color.
scaffoldBackgroundColor: background color for all the scaffolds
accentColor: secondary color used within the app e.g. FloatingActionButton
accentColorBrightness: Used to determine the color of text and icons placed on top of the accent color.

Basically, the primary color is used in AppBar and the accent color (which is the second color) is used in FloatingActionButton. This concept is designed by google as a design guideline called Google Material Design and embedded inside Flutter material design by default, which means, even by changing only those two colors you can still create a nice looking theme.

The beauty of this widget is that it can be customized in a variety of ways from textStyle to check boxes. This means that defining every UI-related property in the ThemeData will keep the UI consistent and effortless throughout the project.

The colors that I have chosen are to visualize the differences between the themes easily, and it is up to you to choose whichever color in your own implementation.

Besides, we can even further change the colors of anything with the theme colors. Let's change the color of the icon with the primary color.

icon: Icon(
              Icons.brightness_5,
              color: Theme.of(context).primaryColor,
            ),

Note: A hot restart is required each time ThemeData class is modified. Because the MaterialApp widget is on the top of the widget tree, and It can only be re-rendered by completely restarting the application...

Adding State with Provider

Someone who works with Flutter for a while must have heard about state management a couple of times a day at least. Within the tutorial, the Provider will be used for its simplicity and wider popularity. Still, you can use any state management solution that you are comfortable with.

The idea is to create a boolean variable isDarkTheme and when set to true, the theme will change accordingly. The state management tool will be used to notify the change across the widget tree and update the state of the UI.

Let's go ahead and create a new file called theme_provider.dart inside the lib folder. In here, we are going to create a class named ThemeProvider that extends to a ChangeNotifier class. In case you are new to Provider, I highly recommend going through the official documentation in Google's Flutter library to understand the terms and basics.

Inside the ThemeProvider class there will be one boolean property named isDarkTheme and one method named changeTheme that toggles the boolean value when it is fired.

class ThemeProvider extends ChangeNotifier {
  bool isDarkTheme = false;

  void changeTheme() {
    isDarkTheme = !isDarkTheme;
    notifyListeners();
  }
}

Next step is to go to dark_theme_page.dart file and wrap the widget with a Consumer where we want to use the ThemeProvider class. In our case it will be the Column widget because we want to change the theme by firing the changeTheme method when we press the IconButton.

 Consumer<ThemeProvider>(
        builder: (context, themeProvider, child) => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.brightness_5,
            ),
          ),
          Center(
            child: Text(
              'Text color will change with the theme',
            ),
          )
        ],
      ),
      ),

Now let's add changeTheme method inside the onPressed function by calling it from themeProvider class.

onPressed: () {
                themeProvider.changeTheme();
              },

As for the final step, first we need to present the ThemeProvider class from top of the Widget tree to so that it can be accessed in lower parts of the tree such as in the dark_theme_page.dart. This will be done via Provider's ChangeNotifierProvider widget.

Next, we need to tell the MaterialApp widget that the theme has changed. Once again, we will use a Consumer widget to wrap the MaterialApp widget to use the value of isDarkTheme variable. The final code will look like as is below.

ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: Consumer<ThemeProvider>(
        builder: (context, themeProvider, child) => MaterialApp(
          title: 'Flutter Demo',
          theme: themeProvider.isDarkTheme ? themeDataDark : themeDataLight,
          home: DarkThemePage(),
        ),
      ),
    );

As for the changes to kick in, let's restart the application. Now press the button to change the theme.

Bonus

You do not have to settle for only color changes with a different theme. Your widgets can also change. As an example, I would like to change the icon when the theme changes.

Let's go ahead and use a ternary operator inside the Icon widget to change the type of the icon.

 IconButton(
            onPressed: () {
              _themeStore.changeBrightnessToDark(!_themeStore.darkMode);
            },
            icon: Icon(
              _themeStore.darkMode ? Icons.brightness_5 : Icons.brightness_3,
              color: Theme.of(context).primaryColor,
            ),

And that's it! With this knowledge, you can create and customize unique and cool looking themes on your own. If you are looking for deeper customizations I highly recommend going through the properties of ThemeData class and experiment on your own.

You can find the source code within the github repository.

Flutter Custom Splash Screen

Ali Riza Reisoglu — Fri, 23 Apr 2021 08:51:10 +0000

What is it?

Splash Screen is the first screen that appears when the application is started. You can picture it as the welcome page or the first page of your presentation.

There two key reasons for using a splash screen. The first one is to have a customized welcome screen with or without animation that creates a visual user interface from the start, and the other neat and sneaky reason is to use the extra time during Splash Screen to fetch important data from API, database or wait for dependency injection operations to take part.

The advantage of this method is its simplicity without necessity to arrange native Android or IOS configurations to display a splash screen.

Let's go ahead and begin by creating a new blank project.

In case you don't know the drill, check the official documentation.

After creating the new project, hit the debugger and the first screen you should be seeing is the MyHomePage screen.

Now we are going to leave the MyHomePage screen as it is and create a new screen called SplashScreen.

Create a new file called splash.dart inside lib folder.

flutter-app/
|- android
|- build
|- ios
|- lib/
    |- splash.dart
    |- main.dart
|- test

Create a StatefulWidget named SplashScreen.

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
    );
  }
}

Inside the splash screen, wa are going to create main functions that makes the splash screen work.

1. startTimer() 
2. initState()
3. navigate()

Basically, startTimer returns a Timer widget that accepts 2 arguments. The first argument is the duration variable and the second argument is a function.

In this case, duration is how long the splash screen will be shown to the user before running the function, and the function is navigate() that has a routing logic. Finally, initState() is where the startTimer() function will be triggered each time the splash screen is called.

Note: Normally initState() is a Life Cycle method, therefore we will not make any changes with it. Additionally, you can head to this YouTube tutorial from Robert Brunhage, to learn more about lifecycle methods.

To customize the duration of the splash screen, change the millisecond's property.

 startTimer() {
    var _duration = Duration(milliseconds: 2000);
    return Timer(_duration, navigate);
  }

Now let's create the navigate method. This method holds the navigation route to the MyHomePage widget which is the home screen for the default counter app.

void navigate() {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (BuildContext context) => MyHomePage(
              title: 'splash screen tutorial',
            )));
  }

Finally, let's call the startTimer method when the splash screen is initiated.

Add the initState method just before the build method inside SplashScreen widget.

  @override
  void initState() {
    super.initState();
    startTimer();
  }

Then, to change the splash screen UI, head to the build function inside the SplashScreen widget and add the child widget as in the below example or add any widget or asset you would like to display.

 @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
            'https://static.thenounproject.com/png/1179225-200.png'),
      ),
    );
  }

Here I added a Network image for display.

In addition, if you are interested in changing the navigation from splash screen to the next screen, change the Route name inside the navigate() function.

Furthermore, we can even add some conditionals inside navigate methods such as redirecting the user to login or home screen based on logged-in status.

One last thing before the splash screen to take effect is to change the home property of the MaterialApp widget inside main.dart.

Head to lib ⇨ main.dart and locate MaterialApp widget inside MyApp widget and change the home property to SplashScreen().

Now hot reload or hot restart the emulator to see the new splash screen you have just implemented!

Bonus

How about adding a simple hero widget and make the splash screen animated.

First let's wrap the container with a Hero widget and give it a tag name.

Hero(
        tag: 'cat',
        child: Container(
          child: Image.network(
              'https://static.thenounproject.com/png/1179225-200.png'),
        ),
      ),

Next, we can go ahead and change the increment button with our image. By default, the hero animation works between the same widgets with the same tags. So in our animation, the image will have a transition of its display from SplashScreen to MyHomePage screen. Head to MyHomePage widget and change the floatingActionButton as in below.

floatingActionButton: Hero(
        tag: 'cat',
        child: Container(
          width: 50,
          child: Image.network(
              'https://static.thenounproject.com/png/1179225-200.png'),
        ),
      ),

Finally, we are going to tweak the navigate method to display hero animation longer than its default duration.

I have added 2-second duration, you can change it a duration of your desire.

void navigate() {
    Navigator.of(context).push(PageRouteBuilder(
        transitionDuration: Duration(seconds: 2),
        pageBuilder: (_, __, ___) => MyHomePage(
              title: 'Hero animation',
            )));
  }

Now when you restart the application, you should be having a simple yet fun animation welcoming you in the beginning of the application.

With this splash screen implementation, the sky is the limit for displaying animations or widgets to user for the most curated experience.
Still, if you are interested in learning more and build a splash screen by its conventional method, you can head to the flutter official documentation.

Furthermore, there is always a package for everything. For splash screen, check out the awesome Flutter_native_splash package.

You can find the source code within the github repository.

How to create a new Flutter Project with a Boilerplate

Ali Riza Reisoglu — Wed, 21 Apr 2021 14:19:49 +0000

Introduction

Creating a new project from scratch is great if you are learning how to build each and every step of the project, or you enjoy the magic of typing "Flutter Create" to the terminal and watch the project building itself.

In most cases, the default "Flutter Create" is not enough for starting with some features that are essential for building a project such as state management & HTTP request packages, databases, folder structure, routing, endpoints, and so on, Therefore If you already know a concept and move on to the actual building part, then starting with a boilerplate project is an effective and time & effort saving way of kicking off your next big idea much faster and probably much more stable.

Note: This template is suitable for relatively larger projects. The state management tools used in this template are MobX & Provider. If you are not familiar with these tools, you can find the documentation in the article. Nevertheless, you can still use this template for smaller project or practice purposes and customize it with your own packages and state management tools of your liking.

Clean Architecture

Before moving on, it is fundamentally necessary to understand and use clean architecture principles with this boilerplate. Then again, it is most likely necessary to use clean architecture in almost every project.

The reason is that clean architecture divides the code into individual layers.

But why is this so important?

Let's say you want to refurbish your house. By separating the tasks into layers, you do not have to wait for the furniture to arrive to paint the walls, or when you have a problem with changing floor tiles, the painted walls will not be affected by this problem.

In a sense, it protects the project from the developer and helps developers to work together simultaneously.

Besides, once each section functions independently of each other, our code becomes:

Easier to modify
Easier to test
Easier to detect bugs & errors

So... How do you divide the code?

There are three main categories in a clean architecture structure;

Data ⇨ Local and / or Remote(API) data sources
Domain ⇨ business logic(use cases) and business objects(entities) to modify or shape the data source
Presentation ⇨ How modified data source is shown to the user

Reso Coder created this exceptional Flutter implementation and visualized it with a graphic called Reso Coder's Flutter Clean Architecture Proposal™.

Plus If you are interested in detailed clean architecture information, please see Robert C. Martin (Uncle Bob)'s article. In the end, if the concept is still unclear, the example implementation will make sure to take you through each layer of real-life usage.

Setting up the Project

Let's begin by fetching the project from GitHub and install it to our local repository.

Note: We will only go through the mobile version of this boilerplate.
#### 1. GitHub Setup:

Let's head to GitHub boilerplate repository.

Press "use this template".

Name your repository and press "Create repository from template"

Go to your created repository, press Code and copy the URL link

#### 2. Cloning Repository into a local directory:

Open up the terminal either directly from your operating system or from your text editor and type;

 git clone <your copied GitHub repository>

if you want to clone into a specific folder

 git clone <your copied github repository> ./Folder1/Folder2

Lastly, open the project folder from the text editor.

3. Getting packages and code generation:

First things first, let's get the required dependencies for the project.

Open up the terminal. By default, most text editors start the terminal inside the project directory.

If not, first head to the project directory,

Next, enter the lines below.

 flutter pub get

Note: If you get an error similar to the error below, make sure to switch your channel to flutter channel stable and run flutter upgrade command afterward.

After the packages are fetched, you will see numerous problems flashing in front of your eyes such as;

Target of URI doesn't exist: 'app_component.inject.dart'. Try creating the file referenced by the URI, or Try using a URI for a file that does exist.

Relax, it is totally normal. The reason is that some packages depend on code generation.

Now we are going to run build_runner which will generate the necessary code for some packages to work, and we will see all those errors fade away one by one.

 flutter packages pub run build_runner build --delete-conflicting-outputs

By now if you did each step right, you should see that all errors have disappeared, leaving with some warnings. Fortunately, they do not affect compiling process anymore. These are warnings to point out some unused or duplicate features.

These warnings can easily be fixed by clicking on the bulb right next to their description, or they can be left ignored if you do not mind having them at all, but it is always preferred to keep the code clean and simple.

Note: In Visual Studio Code, it is possible to hide generated files for easier folder management. In order to do that;

navigate to Preferences ⇨ Settings and search for Files:Exclude. Add the following patterns:

**/*.inject.summary
**/*.inject.dart
**/*.g.dart

Alright, that was all for setting up. Now let's take this project for a ride!

Boilerplate Features:

Before moving on, it is crucial to take a look at the original documentation for understanding the boilerplate template features and folder structure.

There are a variety of features within this boilerplate. They are all explained in their original documentation. It is up to you to whether keep it, replace it or delete it from your project.

Splash ⇨ First screen when the app launches.
Login ⇨ Login screen with ready-made UI layout
Home ⇨ First screen to navigate to after logging in
Routing ⇨ A collection page to store all routing screens for easier Navigation
Theme ⇨ Dark and Light theme available for use
Dio ⇨ HTTP request package
Database ⇨ Sembast
MobX ⇨ State Management
Provider ⇨ State Management
Encryption ⇨ encryption and decryption for String/Uint8List
Validation ⇨ String validation and sanitization for Dart
Code Generation ⇨ Generating necessary code with build_runner
User Notifications ⇨Shows notifications, errors, problems as Flushbar
Logging ⇨ Flogs
Dependency Injection ⇨ Compile-time dependency injection
Dark Theme Support
Multilingual Support ⇨ Localization support for the languages of your choice

This boilerplate template is made by Zubairehman. All credit goes to him for preparing an exceptional starting point for a business level Flutter projects.