Create a Wear OS app using Flutter

Create a Wear OS app using Flutter

In this article, you'll learn how to build a Wear OS (Android Wear) app using Flutter

Setup

To build a Wear OS app, we also have to do a lot to modifications as well as additions to the android part of the Flutter app, which is really a very tedious process, so bear with me.

I am again stating the setup process below (not recommended):

App Gradle File

Change the min SDK version to API 23:

minSdkVersion 23

App Gradle File

Then, add the following dependencies to the Android Gradle file for the app:

dependencies {
 // Wear libraries
 implementation 'com.android.support:wear:27.1.1'
 implementation 'com.google.android.support:wearable:2.3.0'
 compileOnly 'com.google.android.wearable:wearable:2.3.0'
}

App Gradle File

Manifest File

Add the following to your AndroidManifest.xml file:

<!-- Required for ambient mode support -->
<uses-permission android:name="android.permission.WAKE_LOCK" />

<!-- Flags the app as a Wear app -->
<uses-feature android:name="android.hardware.type.watch" />

<!-- Flags that the app doesn't require a companion phone app -->
<application>
<meta-data
    android:name="com.google.android.wearable.standalone"
    android:value="true" />
</application>

AndroidManifest.xml

Update Android’s MainActivity

The ambient mode widget needs some initialization in Android’s MainActivity code. Update your code as follows:

class MainActivity: FlutterActivity(), AmbientMode.AmbientCallbackProvider {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    GeneratedPluginRegistrant.registerWith(this)

    // Wire up the activity for ambient callbacks
    AmbientMode.attachAmbientSupport(this)
  }

  override fun getAmbientCallback(): AmbientMode.AmbientCallback {
    return FlutterAmbientCallback(getChannel(flutterView))
  }
}

Android’s MainActivity

So, after the setup is complete let’s dive into the best part that is coding.

Implementation

Before diving into the real coding part, let’s see what are the plugins required and also import the assets required in this project.

Plugins:

The plugins used for this project are:

  1. wear (for using the Wear OS optimized widgets)
  2. audioplayers (to use audio playback in the app)
dependencies:
  audioplayers: ^0.7.8
  wear: ^0.0.3

Assets:

The images, icons, audio files, as well as the system material icons, are included in the assets folder, which you can download by going to the Google Drive

I will tell you in a minute why I have included the system material icons in the assets folder by downloading them from the Material Design Website, although as you might know all of the material design icons are integrated with Flutter for direct use.

Don’t forget to import these in your “pubspec.yaml” file.

Coding Part

main.dart

First of all, import the packages that are required in the “main.dart” file.

import 'package:flutter/material.dart';
import 'package:wear/wear.dart';

The wear plugin gives three types of widgets:

  • WatchShape: determines whether the watch is square or round.
  • InheritedShape: an InheritedWidget that can be used to pass the shape of the watch down the widget tree.
  • AmbientMode: builder that provides what mode the watch is in. The widget will rebuild whenever the watch changes mode.

We will require all these widgets in the “main.dart” file.

The Wear OS has two modes:

  1. Normal Mode
  2. Ambient Mode

So, when the Wear OS is in the normal mode we will show the real content of the app and when it is in the ambient mode we will show a screen with a dark background, which will help to save battery.

After adding all these, our “main.dart” file will look like this:

import 'package:flutter/material.dart';
import 'package:flutter_os/screens/ambient_screen.dart';
import 'package:flutter_os/screens/start_screen.dart';
import 'package:wear/wear.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Wear App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: WatchScreen(),
        debugShowCheckedModeBanner: false,
      );
}

class WatchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => WatchShape(
        builder: (context, shape) => InheritedShape(
              shape: shape,
              child: AmbientMode(
                builder: (context, mode) =>
                    mode == Mode.active ? StartScreen() : AmbientWatchFace(),
              ),
            ),
      );
}

ambient_screen.dart

Next, we will design the UI of the ambient screen of the watch.

The final Ambient screen will look like this:

Ambient Screen

As you can tell from the screenshot that we have to add a Scaffold (set the background color to black) with a Column containing two widgets:

  1. Text widget (set text color to blue)
  2. FlutterLogo widget

So, the completed ambient screen code will look like this:

import 'package:flutter/material.dart';

class AmbientWatchFace extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                'FlutterOS',
                style: TextStyle(color: Colors.blue[600], fontSize: 30),
              ),
              SizedBox(height: 15),
              const FlutterLogo(size: 60.0),
            ],
          ),
        ),
      );
}

start_screen.dart

In this file, we have to determine the screen size of the watch so that all the components properly fit within the screen. To determine the size and shape of the watch face we have to use the “WatchShape” widget which we get from the wear plugin.

We can determine the screen height and screen width by following this:

WatchShape(
        builder: (context, shape) {
          var screenSize = MediaQuery.of(context).size;
          final shape = InheritedShape.of(context).shape;
          if (shape == Shape.round) {
            // boxInsetLength requires radius, so divide by 2
            screenSize = Size(boxInsetLength(screenSize.width / 2),
                boxInsetLength(screenSize.height / 2));
          }
          var screenHeight = screenSize.height;
          var screenWidth = screenSize.width;
          
          ......
            
        },
),

Now, we can build the UI using the screen size which will look like this:

Start Screen

It again contains a Column with two widgets:

  1. FlutterLogo
  2. RaisedButton (Inside which we have to define a route, which will take us to the next screen, i.e., “name_screen.dart”)

I had to wrap the Column widget with a Container and specified its height and width so that the contents of the column fits perfectly onto the screen.

The code for the start_screen is given below:

import 'package:flutter/material.dart';
import 'package:flutter_os/screens/name_screen.dart';
import 'package:flutter_os/utils.dart';
import 'package:wear/wear.dart';

class StartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: WatchShape(
        builder: (context, shape) {
          var screenSize = MediaQuery.of(context).size;
          final shape = InheritedShape.of(context).shape;
          if (shape == Shape.round) {
            // boxInsetLength requires radius, so divide by 2
            screenSize = Size(boxInsetLength(screenSize.width / 2),
                boxInsetLength(screenSize.height / 2));
          }
          var screenHeight = screenSize.height;
          var screenWidth = screenSize.width;

          return Center(
            child: Container(
              color: Colors.white,
              height: screenSize.height,
              width: screenSize.width,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  FlutterLogo(size: 90),
                  SizedBox(height: 20),
                  RaisedButton(
                    highlightColor: Colors.blue[900],
                    elevation: 6.0,
                    child: Text(
                      'START',
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                    color: Colors.blue[400],
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                        return NameScreen(screenHeight, screenWidth);
                      }));
                    },
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

In the above code snippet, you can see that I have used a method “boxInsetLength” (in line number 17 &18). Actually, it is defined inside the “utils.dart” file, that’s why we had to import “utils.dart” (in line number 3). This method measures the screen size when the watch face is round by taking the radius as the input.

double boxInsetLength(double radius) => radius * 1.4142;

name_screen.dart

We have passed the screen height and screen width to the “name_screen.dart” file, so that we do not need to calculate the screen size again.

The final “name_screen.dart” file looks like this:

Name Screen

I don’t have to elaborate on anything in this file. The code for building this UI is given below:

import 'package:flutter/material.dart';
import 'package:flutter_os/screens/ambient_screen.dart';
import 'package:flutter_os/screens/relax_menu.dart';
import 'package:wear/wear.dart';

class NameScreen extends StatelessWidget {
  final screenHeight;
  final screenWidth;
  NameScreen(this.screenHeight, this.screenWidth);

  @override
  Widget build(BuildContext context) {
    return AmbientMode(
      builder: (context, mode) => mode == Mode.active
          ? NameScreenUI(screenHeight, screenWidth)
          : AmbientWatchFace(),
    );
  }
}

class NameScreenUI extends StatelessWidget {
  final screenHeight;
  final screenWidth;
  NameScreenUI(this.screenHeight, this.screenWidth);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: screenHeight,
          width: screenWidth,
          child: Column(
            children: <Widget>[
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset('assets/outline_arrow.png',scale: 1.8,),
                    SizedBox(width: 5),
                    Text('Back', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w300),)
                  ],
                ),
                onTap: () {
                  Navigator.of(context).pop();
                },
              ),
              SizedBox(height: 20),
              Text(
                'Welcome to',
                style: TextStyle(
                  fontSize: 18,
                ),
              ),
              SizedBox(height: 5),
              Text(
                'FlutterOS',
                style: TextStyle(
                  fontSize: 30,
                  color: Colors.blue[700],
                ),
              ),
              SizedBox(height: 5),
              RaisedButton(
                highlightColor: Colors.blue[900],
                elevation: 6.0,
                child: Text(
                  'NEXT',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                color: Colors.blue[400],
                onPressed: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (context) {
                    return RelaxView(screenHeight, screenWidth);
                  }));
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

One thing that I want you to notice is that in line number 39 I have used the image of a material arrow icon by importing it from the assets, but we know that all the material icons are integrated with Flutter.

Why have I imported the material icons externally?

I used the Icons integrated with Flutter during the initial build of the UI, but these icons were not displaying on the screen rather they were replaced by a Placeholder icon. So, I had to import them externally from the Material Design Website.

For the rest of my app, I have tried to use as much of the original code of the “Relax” app as I could. But to properly use the small screen real estate of the watch I had to tweak the code.

relax_menu.dart

In this screen, I have used a Column with SingleChildScrollView to show the list of different relax sound screens.

The final screen looks like this:

Relax Menu

The code for building this UI is given below:

import 'package:flutter/material.dart';
import 'package:flutter_os/screens/ambient_screen.dart';
import 'package:flutter_os/screens/sound_screen.dart';
import 'package:wear/wear.dart';

const img = 'assets/images/';
List<String> screens = ['rain', 'forest', 'sunset', 'ocean'];

class RelaxView extends StatelessWidget {
  final screenHeight;
  final screenWidth;
  RelaxView(this.screenHeight, this.screenWidth);

  @override
  Widget build(BuildContext context) {
    return AmbientMode(
      builder: (context, mode) =>
          mode == Mode.active ? HomeRoute() : AmbientWatchFace(),
    );
  }
}

class HomeRoute extends StatelessWidget {
  soundBtn(sound, context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(context,
            MaterialPageRoute(builder: (context) => PlayRoute(sound: sound)));
      },
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: Image.asset(
              'assets/icons/$sound.png',
              scale: 1.2,
            ),
          ),
          Text(sound.toUpperCase(),
              style: TextStyle(
                  color: Colors.white, fontSize: 16, letterSpacing: 3.0))
        ],
      ),
    );
  }

  @override
  build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: Image.asset(
              img + 'bkgnd_2.jpg',
              fit: BoxFit.fill,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: InkWell(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset(
                    'assets/outline_arrow.png',
                    scale: 1.8,
                  ),
                  SizedBox(width: 5),
                  Text(
                    'Back',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w300),
                  )
                ],
              ),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
          ),
          Positioned(
            top: 40,
            width: width,
            child: Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Center(
                child: Text(
                  'RELAX',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      letterSpacing: 13.0,
                      fontWeight: FontWeight.w600),
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 70.0),
            child: Center(
              child: SingleChildScrollView(
                physics: BouncingScrollPhysics(),
                child: Column(
                  children: [
                    soundBtn('rain', context),
                    soundBtn('forest', context),
                    soundBtn('sunset', context),
                    soundBtn('ocean', context),
                    SizedBox(
                      height: 40,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

sound_screen.dart

In this screen, mostly the audio playback is handled by using the plugin “audioplayers” and a beautiful background animation is added, which transitions between two images for each screen.

Erin Morrissey has handled the audio playback and the background animation perfectly in this screen.

The only thing that I had to do is to properly fit the contents in such a small screen. I have used “BoxFit.fill” with the background images and I have centered the Column containing two widgets:

  1. Text widget (Heading of the screen)
  2. Play/Pause icon button

The final screens look like this:

Sound Screens

The code used for building this UI is given below:

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';

const img = 'assets/images/';

class PlayRoute extends StatefulWidget {
  final String sound;
  const PlayRoute({Key key, this.sound}) : super(key: key);
  @override
  _PlayRouteState createState() => _PlayRouteState();
}

class _PlayRouteState extends State<PlayRoute> {
  AudioPlayer player;
  AudioCache cache;
  bool initialPlay = true;
  bool playing;

  @override
  initState() {
    super.initState();
    player = new AudioPlayer();
    cache = new AudioCache(fixedPlayer: player);
  }

  @override
  dispose() {
    super.dispose();
    player.stop();
  }

  playPause(sound) {
    if (initialPlay) {
      cache.play('audio/$sound.mp3');
      playing = true;
      initialPlay = false;
    }
    return InkWell(
      onTap: () {
        setState(() {
          if (playing) {
            playing = false;
            player.pause();
          } else {
            playing = true;
            player.resume();
          }
        });
      },
      child: playing
          ? Image.asset('assets/pause_circle_filled.png', scale: 1.2)
          : Image.asset('assets/play_circle_filled.png', scale: 1.2),
    );
  }

  @override
  build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: Background(sound: widget.sound),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: InkWell(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset(
                    'assets/outline_arrow_back_white.png',
                    scale: 1.8,
                  ),
                  SizedBox(width: 5),
                  Text(
                    'Back',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.w300),
                  )
                ],
              ),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
          ),
          Center(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  widget.sound.toUpperCase(),
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      letterSpacing: 10.0,
                      fontWeight: FontWeight.w600),
                ),
                playPause(widget.sound)
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class Background extends StatefulWidget {
  final String sound;
  const Background({Key key, this.sound}) : super(key: key);
  @override
  _BackgroundState createState() => _BackgroundState();
}

class _BackgroundState extends State<Background> {
  Timer timer;
  bool _visible = false;

  @override
  dispose() {
    timer.cancel();
    super.dispose();
  }

  swap() {
    if (mounted) {
      setState(() {
        _visible = !_visible;
      });
    }
  }

  @override
  build(BuildContext context) {
    timer = Timer(Duration(seconds: 6), swap);
    return Stack(
      children: [
        Image.asset(img + widget.sound + '_1.jpg', fit: BoxFit.fill),
        AnimatedOpacity(
            child: Image.asset(
              img + widget.sound + '_2.jpg',
              fit: BoxFit.fill,
            ),
            duration: Duration(seconds: 2),
            opacity: _visible ? 1.0 : 0.0)
      ],
    );
  }
}

So finally, we have completed our Wear OS project, rather you can call it as a FlutterOS.

Conclusion

After creating this project, I admit that Flutter is not optimized for Wear OS devices till now as many of the simple things are not working on Wear OS like all material Icons which are included in Flutter are not displaying on Wear OS devices.

You can find the GitHub repo for this project in the following

Flutter Grocery Shopping Mobile App

Flutter Grocery Shopping Mobile App

This Flutter grocery app is a pro version that has all features of online grocery purchase for your customers.

FLUTTER GROCERY APP
Are you looking to launch your online grocery shop or any E-Commerce mobile app then this flutter grocery app will help you to build the app in just days? We offer an online grocery software system. The mobile application offers amazing features to build a powerful online ordering system or app for your grocery shop. It enhances online home grocery stuffs ordering experience for your customers with your mobile grocery app. This Flutter grocery app is a fully functional mobile app that has all features of online grocery purchase for your customers. So what are you waiting for? Start your online business with your Mobile app today!

YOu check live demo and feature video at:
https://www.youtube.com/watch?v=Y0bn_3Uu2u0

Flutter App Development Company | Hire Flutter App Developers

When it comes to Hybrid Mobile App Development Framework, Flutter is gaining the momentum. And, we as top development company don't hesitate to say that it is going to be future cross-platform mobile app development. Though there are few other frameworks available for cross-platform and hybrid mobile app development, Flutter is an increasing trend. In fact, intellectuals are comparing Flutter vs. React Native vs. Ionic and finding the best solutions out of them. Some of the top companies have already adapted Flutter, and they are very positive about it.

When it comes to Hybrid Mobile App Development Framework, Flutter is gaining the momentum. And, we as top development company don't hesitate to say that it is going to be future cross-platform mobile app development. Though there are few other frameworks available for cross-platform and hybrid mobile app development, Flutter is an increasing trend. In fact, intellectuals are comparing Flutter vs. React Native vs. Ionic and finding the best solutions out of them. Some of the top companies have already adapted Flutter, and they are very positive about it.


Flutter is the future of mobile app development 👏👏👏

Flutter is the future of mobile app development 👏👏👏

Flutter is a new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.” The modern, reactive ...🎁🎁🎁🎁

Flutter is a new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.” The modern, reactive ...

I dabbled a bit in Android and iOS development quite a few years back using Java and Objective-C. After spending about a month working with both of them, I decided to move on. I just couldn’t get into it.

But recently, I learned about Flutter and decided to give mobile app development another shot. I instantly fell in love with it as it made developing multi-platform apps a ton of fun. Since learning about it, I’ve created an app and a library using it. Flutter seems to be a very promising step forward and I’d like to explain a few different reasons why I believe this.

Powered by Dart

Flutter uses the Google-developed Dart language. If you’ve used Java before, you’ll be fairly familiar with the syntax of Dart as they are quite similar. Besides the syntax, Dart is a fairly different language.

I’m not going to be talking about Dart in depth as it’s a bit out of scope, but I’d like to discuss one of the most helpful features in my opinion. This feature being support for asynchronous operations. Not only does Dart support it, but it makes it exceptionally easy.

This is something you’ll most likely be using throughout all of your Flutter applications if you’re doing IO or other time-consuming operations such as querying a database. Without asynchronous operations, any time-consuming operations will cause the program to freeze up until they complete. To prevent this, Dart provides us with the async and await keywords which allow our program to continue execution while waiting for these longer operations to complete.

Let's take a look at a couple of examples: one without asynchronous operations and one with.

// 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!');
	}

And the output:

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

This isn’t ideal. No one wants to use an app that freezes up when it executes long operations. So let’s modify this a bit and make use of 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!');
	}

And the output once again:

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

Thanks to asynchronous operations, we’re able to execute code that takes a while to complete without blocking the execution of the rest of our code.

Write Once, Run on Android and iOS

Developing mobile apps can take a lot of time considering you need to use a different codebase for Android and iOS. That is unless you use an SDK like Flutter, where you have a single codebase that allows you to build your app for both operating systems. Not only that, but you can run them completely natively. This means things such as scrolling and navigation, to name a few, act just like they should for the OS being used.

To keep with the theme of simplicity, as long as you have a device or simulator running, Flutter makes building and running your app for testing as simple as clicking a button.

UI Development

UI development is one of those things that I almost never look forward to. I’m more of a backend developer, so when it comes to working on something that is heavily dependent on it, I want something simple. This is where Flutter shines in my eyes.

UI is created by combining different widgets together and modifying them to fit the look of your app. You have near full control over how these widgets display, so you’ll always end up with exactly what you’re looking for. For laying out the UI, you have widgets such as Row, Column, and Container. For content, you have widgets like Text and RaisedButton. This is only a few of the widgets Flutter offers, there are a lot more. Using 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 has more tricks up its sleeve that makes theming your app a breeze. You could go through and manually change the fonts, colors, and looks for everything one by one, but that takes way too long. Instead, Flutter provides us with something called ThemeData that allows us to set values for colors, fonts, input fields, and much more. This feature is great for keeping the look of your app consistent.

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 set the apps colors, font family, and some text styles. Everything besides the text styles will automatically be applied app-wide. Text styles have to be set manually for each text widget, but it's still simple:

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

To make things even more efficient, Flutter can hot reload apps so you don’t need to restart it every time you make a change to the UI. You can now make a change, save it, then see the change within a second or so.

Libraries

Flutter provides a lot of great features out of the box, but there are times when you need a bit more than it offers. This is no problem at all considering the extensive number of libraries available for Dart and Flutter. Interested in putting ads in your app? There’s a library for that. Want new widgets? There are libraries for that.

If you’re more of a do-it-yourselfer, make your own library and share it with the rest of the community in no time at all. Adding libraries to your project is simple and can be done by adding a single line to your pubspec.yaml file. For example, if you wanted to add the sqflite library:

dependencies:
 flutter:
  sdk: flutter
 sqflite: ^1.0.0

After adding it to the file, run flutter packages get and you're good to go. Libraries make developing Flutter apps a breeze and save a lot of time during development.

Backend Development

Most apps nowadays depend on some sort of data, and that data needs to be stored somewhere so it can be displayed and worked with later on. So keeping this in mind when looking to create apps with a new SDK, such as Flutter, is important.

Once again, Flutter apps are made using Dart, and Dart is great when it comes to backend development. I’ve talked a lot about simplicity in this article, and backend development with Dart and Flutter is no exception to this. It’s incredibly simple to create data-driven apps, for beginners and experts alike, but this simplicity by no means equates to a lack of quality.

To tie this in with the previous section, libraries are available so you can work with the database of your choosing. Using the sqflite library, we can be up and running with an SQLite database fairly quickly. And thanks to singletons, we can access the database and query it from practically anywhere without needing to recreate an object every single 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 convert that to an object using a model. Or if you want to store an object in the database, you can convert it 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,
	    };
}

This data isn’t all that useful without a way to display it to the user. This is where Flutter comes in with widgets such as the FutureBuilder or StreamBuilder. If you're interested in a more in-depth look at creating data-driven apps using Flutter, SQLite, and other technologies, I encourage you to check out the article I wrote on that:

https://medium.com/@erigitic/using-streams-blocs-and-sqlite-in-flutter-2e59e1f7cdce

Final Thoughts

With Flutter, the possibilities are practically endless, so even super extensive apps can be created with ease. If you develop mobile apps and have yet to give Flutter a try, I highly recommend you do as I’m sure you’ll fall in love with it as well. After using Flutter for quite a few months, I think it’s safe to say that it’s the future of mobile development. If not, it’s definitely a step in the right direction.