A few years ago, I got involved in Android and iOS development using Java and Objective-C, and after trying them out for about a month, I decided to move on.

But recently, I learned about Flutter and decided to develop mobile applications again.I immediately fell in love with it because it made developing multi-platform applications very interesting.Since then, I've created an application and a library to use it.Flutter seems to be a very promising step forward and I want to explain some of the different reasons why I believe it.

Supported by Dart

Flutter uses the Dart language developed by Google.If you've used Java before, you'll be familiar with Dart's syntax because they are very similar.In addition to grammar, Dart is a completely different language.

I won't go into Dart in depth because it's a bit out of scope, but I'd like to discuss one of the most useful features I think.This feature supports asynchronous operations.Dart not only supports it, but also makes it incredibly easy.

If you're performing IO or other time-consuming operations, such as querying a database, it's likely to be used in all Flutter applications.No asynchronous operation, any time-consuming operation will cause the program to freeze until it is complete.To prevent this, Dart provides us with async and await keywords that allow our programs to continue executing while waiting for these longer operations to complete.

Let's look at a few examples: one with no asynchronous operations and one with asynchronous operations.

// Without asynchronous operations
import 'dart:async';

main() {
    longOperation();
    printSomething();
}

longOperation() {
    Duration delay = Duration(seconds: 3);
    Future.delayed(delay);
    print('Waited 3 seconds to print this and blocked execution.');
}

printSomething() {
    print('That sure took a while!');
}

Output t:

Waited 3 seconds to print this and blocked execution.
That sure took a while!

That's not ideal.No one wants to use an application that is frozen during a long operation.So let's make some changes to it and use the async and await keywords.

// With asynchronous operations
import 'dart:async';

main() {
    longOperation();
    printSomething();
}

Future<void> longOperation() async {
    var retVal = await runLongOperation();

    print(retVal);
}

const retString = 'Waited 3 seconds to return this without blocking execution.';
Duration delay = Duration(seconds: 3);

Future<String> runLongOperation() => Future.delayed(delay, () => retString);

printSomething() {
    print('I printed right away!');
}

Output again:

I printed right away!
Waited 3 seconds to return this without blocking execution.

Thanks to asynchronous operations, we can execute code that takes a while to complete without blocking the rest of the code.

Write once, run on Android and iOS

Given that you need to use different code libraries for Android and iOS, developing mobile applications can take a lot of time.Unless you use an SDK such as Flutter, you have only one code base that allows you to build applications for both operating systems.Not only that, you can run them completely locally.This means functions such as scrolling and navigation, just like they do for the operating system they are using.

To keep it simple, Flutter makes the process of creating and running an application as simple as clicking a button, as long as you're running a device or simulator.

UI Development

UI development is one of the things I hardly ever expected.I'm more of a back-end developer, so when dealing with things that depend heavily on it, I need something simple.This is where Flutter shines in my eyes.

Create a UI by combining different widgets and modifying them to fit the look of your application.You have almost complete control over how these widgets are displayed, so you always get the exact information you need.In order to lay out the UI, you need to use widgets such as rows, columns, and containers.For content, you have widgets such as Text and RaisedButton.This is just a few of the widgets provided by Flutter, and many more.With these widgets, we can build a very simple UI:

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Flutter App'),
            centerTitle: true,
            elevation: 0,
        ),
        body: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Container(
                            child: Text('Some text'),
                        ),
                        Container(
                            child: RaisedButton(
                                onPressed: () {
                                    // Do something on press
                                },
                                child: Text('PRESS ME'),
                            ),
                        ),
                    ],
                ),
            ],
        ),
    );
}

Flutter makes it easy to set a theme.You can manually change the font, color, and find everything one by one, but it takes too long.Instead, Flutter gives us something called ThemeData, which allows us to set values for colors, fonts, input fields, and so on.This feature is ideal for keeping your application looking the same.

theme: ThemeData(
    brightness: Brightness.dark,
    canvasColor: Colors.grey[900],
    primarySwatch: Colors.teal,
    primaryColor: Colors.teal[500],
    fontFamily: 'Helvetica',
    primaryTextTheme: Typography.whiteCupertino.copyWith(
        display4: TextStyle(
            color: Colors.white,
            fontSize: 36,
        ),
    ),
),

With this ThemeData, we can set the application's color, font family, and some text styles.Except for text styles, everything is automatically applied throughout the application.You must manually style each text widget, but it's still simple:

child: Text(
    'Some text',
    style: Theme.of(context).primaryTextTheme.display4,
),

To increase efficiency, Flutter can hot-overload an application, so you don't need to restart it every time you change the UI.Now you can make changes, save them, and see them in about a second.

library

Flutter provides many great features out of the box, but sometimes you need more than it provides.Given the large number of libraries available to Dart and Flutter, this is not a problem at all.Interested in advertising your app?There is a library.Need a new widget?There are libraries.

If you prefer to do it yourself, create your own library and immediately share it with other members of the community.It's easy to add libraries to your project byPubspec.yamlAdd a line to the file to complete.For example, if you want to add the sqflite library:

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^1.0.0

Once you've added it to your file, run the flutter package get and you're ready to start.Libraries make it easy to develop Flutter applications and save a lot of time during development.

Backend development

Today, most applications rely on data that needs to be stored somewhere for later display and use.Therefore, it is important to keep this in mind when creating applications with new SDK s, such as Flutter.

Again, the Flutter app was made with Dart, which is great for back-end development.In this article, I've covered a lot of simplicity, and back-end development using Dart and Flutter is no exception.For beginners and professionals, creating data-driven applications is extremely easy, but this simplicity does not amount to a lack of quality.

To associate it with the previous section, you can use libraries, so you can use the database of your choice.Using the sqflite library, we can start and run the SQLite database fairly quickly.And because of the singleton, we can access the database and query it almost anywhere without having to re-create the object every time.

class DBProvider {
    // Singleton
    DBProvider._();

    // Static object to provide us access from practically anywhere
    static final DBProvider db = DBProvider._();
    Database _database;

    Future<Database> get database async {
        if (_database != null) {
            return _database;
        }

        _database = await initDB();
        return _database;
    }

    initDB() async {
        // Retrieve your app's directory, then create a path to a database for your app.
        Directory documentsDir = await getApplicationDocumentsDirectory();
        String path = join(documentsDir.path, 'money_clip.db');

        return await openDatabase(path, version: 1, onOpen: (db) async {
            // Do something when the database is opened
        }, onCreate: (Database db, int version) async {
            // Do something, such as creating tables, when the database is first created.
            // If the database already exists, this will not be called.
        }
    }
}

After retrieving data from a database, you can use a model to convert it to an object.Alternatively, if you want to store objects in a database, you can convert them to JSON using the same model.

class User {
    int id;
    String name;

    User({
        this.id,
        this.name,
    });

    factory User.fromJson(Map<String, dynamic> json) => new User(
        id: json['id'],
        name: json['name'],
    );

    Map<String, dynamic> toJson() => {
        'id': id,
        'name': name,
    };
}

If there is no data to display to the user, it is not that useful.This is where Flutter comes with widgets such as FutureBuilder or StreamBuilder.If you want to learn more about how to create data-driven applications using Flutter, SQLite, and other technologies, I recommend you read my article:

How to use Streams, BLoC, and SQLite in Flutter

Last thoughts

With Flutter, the possibilities are virtually unlimited, so it's even easier to create super-extended applications.If you're developing a mobile application and haven't tried Flutter yet, I strongly recommend that you do, because I'm sure you'll love it too.A few months after using Flutter, I think it's definitely the future of mobile development.If not, that must be a step in the right direction.

Communication

Lao Meng Flutter blog address (330 control usages): http://laomengit.com

Welcome to the Flutter Exchange Group (WeChat: laomengit), Focus on Public Number (Lao Meng Flutter):