Forem: Tanweer Anwar

Flutter Series - Fetch data from the internet

Tanweer Anwar — Sat, 05 Jun 2021 16:03:24 +0000

In the last tutorial, we built our first flutter app. In that app we displayed random country names. We hardcoded those names in the app.

Flutter Series - Create your first app in Flutter

Tanweer Anwar ・ May 30 '21

#flutter #dart #ios #android

In this tutorial, we will make this app dynamic by fetching the country date from a real API. But before that we have to make some improvement in the app.

Improving UI

First of all, we need to improve our UI a little bit. We use Card widget to display each country detail but we can improve the look by replacing the Card widget by a Container. To give the Container a raised look, we will use BoxShadow and to give corner a rounded look, we will use use BorderRadius. Container has a boxDecoration property to improve appearance of a Container. boxDecoration takes a BoxDecoration widget. In BoxDecoraion we can assign the boxShadow and borderRadius.
Here is the CountryList class:

class CountryList extends StatelessWidget {
  final List<String> countries = [ "Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cabo Verde", "Cameroon", "Chad", 
  "Comoros ", "Congo (the)", "Côte d'Ivoire", "Djibouti", "Egypt", "Equatorial Guinea", "Eritrea", "Ethiopia", 
  "Gabon", "Gambia ", "Ghana", "Guinea", "Guinea-Bissau", "Kenya", "Lesotho", "Liberia", "Libya", "Madagascar", "Malawi", "Mali"];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (BuildContext context, int index) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.2),
                spreadRadius: 2,
                blurRadius: 3,
                offset:
                    Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          height: 70,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CircleAvatar(
                  backgroundColor: Color(
                    (Random().nextDouble() * 0xFFFFFF).toInt(),
                  ).withOpacity(1.0),
                  child: Text(
                    countries[index].substring(0, 2),
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text(
                      countries[index],
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Improving structure of the project

Our project at the moment is very small with just a single custom widget. So our whole code lives in a single file ie. main.dart. But once the project gets larger, we have to follow some pattern of breaking down the project into smaller parts or units to make the code more maintainable.
For now, we will create a screens/ directory in lib/. This directory will contain individual screen/page of the app. Currently we have only one page ie.Homepage. In screens/ directory create HomeScreen.dart file to contain HomePage code.
Move the HomePage and CountryList widget into the HomeScreen.dart file. Import flutter/material.dart(for all the material widgets and classes) and dart:math(for Random function) package in this file. HomeScreen.dart will now look like this.

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country List')
      ),
      body: CountryList(),
    );
  }
}

class CountryList extends StatelessWidget {
  final List<String> countries = [ "Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cabo Verde", "Cameroon", "Chad", 
  "Comoros ", "Congo (the)", "Côte d'Ivoire", "Djibouti", "Egypt", "Equatorial Guinea", "Eritrea", "Ethiopia", 
  "Gabon", "Gambia ", "Ghana", "Guinea", "Guinea-Bissau", "Kenya", "Lesotho", "Liberia", "Libya", "Madagascar", "Malawi", "Mali"];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (BuildContext context, int index) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.2),
                spreadRadius: 2,
                blurRadius: 3,
                offset:
                    Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          height: 70,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CircleAvatar(
                  backgroundColor: Color(
                    (Random().nextDouble() * 0xFFFFFF).toInt(),
                  ).withOpacity(1.0),
                  child: Text(
                    countries[index].substring(0, 2),
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text(
                      countries[index],
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Since main.dart file make reference to HomePage widget, so we need to import HomePage widget in the main.dart file. This can be done by importing HomeScreen.dart file into the main.dart file. We can provide both relative as well as absolute path during import.
Relative path:
import 'screens/HomeScreen.dart';
Absolute path:
import 'package:country_list/screens/HomeScreen.dart';
We will use relative paths for user created files.
So now main.dart looks like this:

import 'package:flutter/material.dart';
import 'screens/HomeScreen.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

Extracting large widgets

To make code even more maintainable, we are going to extract large widgets within a screen into its own file. These files will be created in widgets/ directory in lib/. For this project, we are going to extract CountryList widget into CountryList.dart file in widgets/.

widgets/CountryList.dart

import 'package:flutter/material.dart';
import 'dart:math';
class CountryList extends StatelessWidget {
  final List<String> countries = [ "Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cabo Verde", "Cameroon", "Chad",
    "Comoros ", "Congo (the)", "Côte d'Ivoire", "Djibouti", "Egypt", "Equatorial Guinea", "Eritrea", "Ethiopia",
    "Gabon", "Gambia ", "Ghana", "Guinea", "Guinea-Bissau", "Kenya", "Lesotho", "Liberia", "Libya", "Madagascar", "Malawi", "Mali"];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (BuildContext context, int index) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.2),
                spreadRadius: 2,
                blurRadius: 3,
                offset:
                Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          height: 70,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CircleAvatar(
                  backgroundColor: Color(
                    (Random().nextDouble() * 0xFFFFFF).toInt(),
                  ).withOpacity(1.0),
                  child: Text(
                    countries[index].substring(0, 2),
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text(
                      countries[index],
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Now we need to import this widget in HomeScreen.dart.

screens/HomeScreen.dart

import 'package:flutter/material.dart';
import '../widgets/CountryList.dart';
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country List')
      ),
      body: CountryList(),
    );
  }
}

Stateful Widget

As we already have discussed in the last article that there are two types of widget. Widgets with state and widget without state. We have already learned about the first type ie. Stateless Widget. Now we are going to learn about the second type, Stateful Widget. We can create Stateful widget by extending the StatefulWidget class. We can convert our CountryList widget into Stateful widget.
Now CountryList widget will look like this:

import 'package:flutter/material.dart';
import 'dart:math';
class CountryList extends StatefulWidget {
  @override
  _CountryListState createState() => _CountryListState();
}

class _CountryListState extends State<CountryList> {
  final List<String> countries = [ "Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cabo Verde", "Cameroon", "Chad",
    "Comoros ", "Congo (the)", "Côte d'Ivoire", "Djibouti", "Egypt", "Equatorial Guinea", "Eritrea", "Ethiopia",
    "Gabon", "Gambia ", "Ghana", "Guinea", "Guinea-Bissau", "Kenya", "Lesotho", "Liberia", "Libya", "Madagascar", "Malawi", "Mali"];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (BuildContext context, int index) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.2),
                spreadRadius: 2,
                blurRadius: 3,
                offset:
                Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          height: 70,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CircleAvatar(
                  backgroundColor: Color(
                    (Random().nextDouble() * 0xFFFFFF).toInt(),
                  ).withOpacity(1.0),
                  child: Text(
                    countries[index].substring(0, 2),
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text(
                      countries[index],
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

We can see CountryList extends StatefulWidget. But StatefulWidget does not contain build method. It just contains different states of a widget. For this we need to create state for this widget. This is done in the line _CountryListState createState() => _CountryListState();.
createState method returns a widget which contains individual state of this widget. () => is fat arrow notation of defining a function which just have a return statement.

_CountryListState is the widget containing individual state of CountryList since it extends State<CountryList>. _ before name in dart is used to make a variable, class or method private to its file. So _CountryListState is private to the file and can't be accessed from outside this file. This CountryList will contain all the state variables that can change.

setState
Now question arises, how can we change state? State change can be done by calling setState method with new state. setState takes an anonymous function. And within that function we can assign new state. Example:

Class _ExampleWidgetState extends State<ExampleWidget> {
  int count = 1;
  @override
  Widget build(BuildContext build) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          setState(() {
            count += 1;
          });
        },
        child: const Text('Count $count),
      ),
    );
  }
}

API for country data

We are going to fetch data from an API using HTTP requests. The url of the API:

https://api.first.org/data/v1/countries

This API will return following json:

{
status: "OK",
status-code: 200,
version: "1.0",
total: 251,
limit: 100,
offset: 0,
access: "public",
data: {
  DZ: {
    country: "Algeria",
    region: "Africa"
  },
  AO: {
    country: "Angola",
    region: "Africa"
  },
  ...
}

We are concerned with data property. It is an object containing country code as its keys and object containing country details as its respective value.

Installing an external package

Flutter allows installation of external packages from pub.dev. This packages allows quickly building an app without having to develop everything from scratch.
For this project, we are going to install dio. This package provides a powerful http client which helps in making and hadling http requests. To install dio, open pubspec.yaml present in the root of the project and under dependencies: below cupertino_icons: ^1.0.2 write this line

dio: ^4.0.0

Here dio indicates package name while ^1.0.2 indicates version to be installed.
After that run flutter pub get to install all the packages.

Model the country data

Since we have three property related to each country ie. country code, country name and continent of each country. We need to store all three property of each country in a single variable/unit. Best way is to create a model for each country. Model is nothing but a dart class used to store data.
Create a models/ directory in lib/. This directory will contain all the models created in the project.
Inside models/, create a Country.dart file. Content of the file will be following:

import 'package:flutter/cupertino.dart';
import 'dart:math' show Random;

class Country {
  String name;
  String region;
  String code;
  Color backgroundColor;
  Country(
      {this.name,
      this.region,
      this.code,
      this.backgroundColor});
  Country.fromJson({String countryCode, Map<String, dynamic> data})
      : this.code = countryCode,
        this.name = data["country"],
        this.region = data["region"],
        this.backgroundColor =
            Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
}

Here Country class represent the model with four properties. We have moved backgroundColor property from widget to the model. This way we get a random color when the model is created and we don't have to assign a random color each time CountryList widget is built. Country.fromJson is a named constructor used to create a model from parsed JSON data.

While importing from a package, use show keyword to just import the members we need from the package instead of importing the whole package. In the line import 'dart:math' show Random;, we just imported Random() function from dart:math package.

Dart async concepts

We are going to define the operation of fetching the data from API as a asynchronous operation. Asynchronous operations let our program complete work while waiting for another operation to finish.

Future
A future is an instance of the Future class. A future represents the result of an asynchronous operation, and can have two states: uncompleted or completed. When data type of a variable is Future<T>, it means variable will have type of T when Future is completed in the future.

Async and Await
The async and await keywords provide a declarative way to define asynchronous functions and use their results. Remember these two basic guidelines when using async and await:

To define an async function, add async before the function body.
The await keyword works only in async functions.

Example:

Future<String> createOrderMessage() async {
  var order = await fetchUserOrder();
  return 'Your order is: $order';
}

Future<String> fetchUserOrder() =>
    // Imagine that this function is
    // more complex and slow.
    Future.delayed(
      Duration(seconds: 2),
      () => 'Large Latte',
    );

Future<void> main() async {
  print('Fetching user order...');
  print(await createOrderMessage());
}

Result:

Fetching user order...
Your order is: Large Latte

Let's fetch some data

Code for fetching data and converting it into an usable format:

Future<List<Country>> fetchCountries() async {
    //Create an instance of Dio class
    final Dio dio = Dio();
    //Empty countries list
    List<Country> countries = [];
    try {
      //Perform a get request on the given url
      final response = await dio.get("https://api.first.org/data/v1/countries");

      if (response.statusCode == 200) {
        //If status code is 200
        //Extract data property containing countries detail from response json.
        final Map<String, dynamic> data = response.data["data"];
        //Loop through all the keys in the data map
        for (MapEntry entry in data.entries) {
          //Create Country model from each entry in the map and add to it countries list
          countries
              .add(Country.fromJson(countryCode: entry.key, data: entry.value));
        }
      }
      return countries;
    } on DioError catch (e) {
      //On fetch error raise an exception
      throw Exception('Failed to fetch country data');
    }
  }

Here we first create an instance of Dio client. This instance will be used to make http requests. Next we assign an empty country list. Next we make a GET request using the Dio client. We store the result of the operation in response varialbe. Since this operation returns a Future, we have await the result of the operation using await keyword. This response object will contain all the information related to the request like status code of the request, response data etc. Response json data can be accessed from response.data. Dio automatically decode json into a dart Map<String,dyanmic>. So we don't to manually decode this json data.
We check if the status code of the response is 200 or not. If the status code of the response is 200, we get the data property from response.data. We only need data property from response.data. Response data is a Map. So we loop through it using for..in loop and create a Country object from each entry of the map(using Country.fromJson constructor) and then add it to countryList.
We put data fetching code in a try block to make sure that if certain errors occur during request, we can catch those errors in the corresponding catch block. In this code we used on DioError because we are catching a specific error ie.DioError. It is the error reported by Dio client. If Dio client encounters status code of the request as 400, 403, 404, 500 etc., it will report DioError. So in the catch block, we can take action depending on the error. In the above code, on encountering error we are raising a custom exception.
This function returns Future<List<Country>> meaning the result obtained by calling this function will be resolved to List<Country>.

FutureBuilder

It is a widget that builds itself based on the latest snapshot of interaction with a Future. FutureBuilder takes a future as a property and based on state of future, it builds itself. It also takes a builder function. builder function takes two argument ie. BuildContext and AsyncSnapshot.
Snapshot can have three connection state ie. waiting, active and done. Based on connection state we can display different widgets. For example, when the connection state is waiting we can display a circular progress indicator and when the connection state is done we can display the data within the UI we previously built.
We also need to check for errors encountered during resolution of future and display the correct error message to the user. Snapshot has a hasError property for this purpose. If hasError is true, we can display error from snapshot.error.toString().
We are also going to display country region(continent) below the country name in a Column.

You can learn more about FutureBuilder from this page.

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'dart:math';
import '../models/Country.dart';

class CountryList extends StatefulWidget {
  @override
  _CountryListState createState() => _CountryListState();
}

class _CountryListState extends State<CountryList> {
  Future<List<Country>> _fetchedCountries;

  Future<List<Country>> fetchCountries() async {
    //Create an instance of Dio class
    final Dio dio = Dio();
    //Empty countries list
    List<Country> countries = [];
    try {
      //Perform a get request on the given url
      final response = await dio.get("https://api.first.org/data/v1/countries");

      if (response.statusCode == 200) {
        //If status code is 200
        //Extract data property containing countries detail from response json.
        final Map<String, dynamic> data = response.data["data"];
        //Loop through all the keys in the data map
        for (MapEntry entry in data.entries) {
          //Create Country model from each entry in the map and add to it countries list
          countries
              .add(Country.fromJson(countryCode: entry.key, data: entry.value));
        }
      }
      return countries;
    } on DioError catch (e) {
      //On fetch error raise an exception
      throw Exception('Failed to fetch country data');
    }
  }

  @override
  void initState() {
    super.initState();
    setState(() {
      _fetchedCountries = fetchCountries();
    });
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _fetchedCountries,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Center(
              child: Text(
                snapshot.error.toString(),
                style: TextStyle(fontSize: 18),
              ),
            );
          }
          if (snapshot.hasData) {
            List<Country> countries = snapshot.data;
            return countryListView(countries: countries);
          }
        }
      },
    );
  }

  Widget countryListView({List<Country> countries}) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (BuildContext context, int index) {
        Country country = countries[index];
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10)),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.2),
                  spreadRadius: 2,
                  blurRadius: 3,
                  offset: Offset(0, 3), // changes position of shadow
                ),
              ],
            ),
            height: 70,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  CircleAvatar(
                    backgroundColor: Color(
                      (Random().nextDouble() * 0xFFFFFF).toInt(),
                    ).withOpacity(1.0),
                    child: Text(
                      country.code,
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          FittedBox(
                            fit: BoxFit.contain,
                            child: Text(
                              country.name,
                              style: TextStyle(fontSize: 18),
                            ),
                          ),
                          Text(
                            country.region,
                            style: TextStyle(
                              fontSize: 14,
                              color: Color(0Xff3366ff),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

_fetchedCountries is a state variable. It is of type Future<List<Country>> meaning it is a future which will resolve into List<Country>. This future will be used in the FutureBuilder.
initState method is a builtin method. It is called automatically when the widget is inserted into the widget tree. So if you want to take an operation when the widget is first build, you can do it in initState. Here we set _fetchedCountries to the future returned from fetchCountries function.
In FutureBuilder, we check for the connection state. If it is waiting, we display a CircularProgressIndicator widget. While if it is done, we check if snapshot encountered some error using snapshot.hasError. If snapshot.hasError is true, we display the error else display snapshot.data in a listview.
FittedBox widget scale the content so that the content fit within itself. It prevents widget from overflowing. You can learn more about FittedBox from this page.

And when the data is turned off:

Wrapping up

So we are done with this part of tutorial. In this tutorial we learned to make our app dynamic by fetching data from an API. In the next tutorial we will learn how to manage our app state properly.
You can always find the source code of this tutorial on github.

tanweer919 / Flutter-tutorial

Flutter tutorial

This repo contains all the apps built in Flutter tutorial series.

View on GitHub

The source code for all of the app we are going to build in this series will live in different directory of this repo. For this tutorial source code is in country_list.

So that is it for me. See in you next tutorial. Thank you and Goodbye👋👋.

Flutter Series - Create your first app in Flutter

Tanweer Anwar — Sun, 30 May 2021 17:56:39 +0000

In the last tutorial, we learned a little about dart programming language. In this tutorial we will get started with the framework itself and learn to build basic applications with flutter. If at anytime you need to refer to dart concepts, you can visit the last tutorial.

Flutter Series - Dart for Flutter

Tanweer Anwar ・ Dec 24 '20

#flutter #dart

Install flutter

First and foremost we need to install flutter before using it to build beautiful applications. Since, it is a quite time taking process and steps are different for different operating systems. I'm going to recommend to follow the flutter official documents for installation instructions https://flutter.dev/docs/get-started/install.

Getting started with Flutter

Before starting with the development, we need to first check that everything is setup correctly. For this run the following command:

flutter doctor

If you get similar output as below, then your flutter installation is working correctly.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 2.1.0-13.0.pre.86, on macOS 11.2.1 20D75 darwin-x64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.56.0)
[✓] Connected device (2 available)

Create your first Flutter project

Let's create our first Flutter project. For this run the following command

flutter create -t app country_list

-t app option is optional. It tells flutter command line to create a Flutter Application. This option helps to prevent AndroidX migration issue in the future.

So country_list directory is created. It will contain sample code for a counter app. Navigate to country_list project.

cd country_list/

Run your first Flutter project.

Use flutter run command the app in debug mode.

flutter run

It will start the sample counter app in flutter.

While application is running press r to Hot reload the app while R(shift+r) to Hot restart the app.
Both Hot reload and Hot restart are faster way to see the result of the code changes made on the screeen.
Hot reload maintains the app state while updating the UI almost instantaneously. Hot restart, by comparison, takes a little longer because it resets the app state to its initial conditions before updating the UI. Both of these are faster than doing a full restart, which requires recompiling the app.

Dart code for flutter app lives in lib/ directory. main.dart is the file from which the execution of the app starts. So we will be editing that file. Open lib/main.dart and delete all its content and replace it with following code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    )
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First App')
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

You will see the following screen on re-running the application.

So let's understand what we did in the above code.

In line 1 we imported flutter/material.dart package using import 'package:flutter/material.dart'; In flutter, we can import in-built as well as external package to achieve certain tasks. Material package we just imported contains all the important widgets that we are going to use today.
In the next line we defined main function. Execution of every dart program starts from main function. Dart compiler looks for this function to start execution.
Within main function, we called runApp() function. This function attaches our app to the screen of the device on which it is running.
MaterialApp widget is a convenience widget that wraps a number of widgets that are commonly required for material design applications. This app simplifies the process of design beautiful UIs based on material design. This is generally the outermost widget in our app. You certainly aren’t required to use MaterialApp in your project. You can use CupertinoApp to make iOS users feel at home, or you can even build your own set of custom widgets to fit your brand using WidgetsApp.
In MaterialApp we passed debugShowCheckedModeBanner: false. This removes the top-right debug banner from the app.
We set home property as HomePage widget. This sets HomePage as the home screen or the first screen of the app.

HomePage Widget

This is a custom widget. Basically there are two types of custom widgets are in flutter ie. Stateless and Stateful widget.
Stateless widgets are those widgets which does not have any state and it never changes. While Stateful widgets are those widgets which contains state and are dynamic. It can change its appearance in response to events triggered by user interactions or when it receives data.
We can create a custom widget class by either extending Stateless or Stateful class.
Here HomePage class represents a stateless widget since it extends Stateless class.
Every Stateless widget expects a build(BuildContext context) function to build UI of the widget. @override tells the compiler that we are overriding or redefining the build(BuildContext context) function. Widget keyword before function definition indicates that this function will return a Widget.
We return Scaffold widget from HomePage widget.

Scaffold widget implements the basic material design visual layout structure. It acts as a base to contain different parts of UI like AppBar, BottomNavigationBar, FloatingActionButton etc.
In the Scaffold, we pass AppBar(title: Text('First App'),) to the appBar property to display an AppBar with title First App.

Notice in title property we pass Text('First App') widget instead of just passing First App as string. This is because in flutter everything is a defined using widget including margin and padding.

Then we define the body property of the Scaffold which contains the main content of the screen. We set body as Center(child: Text('Hello World'),). Center widget as name suggests center its child Text('Hello World') with respect to its parent(in this case Scaffold).

Improve the app to display list of countries

Let's improve the look and functionality of the app. Currently, it just displays a "Hello World" text. Now we will display list of countries in a beautiful listview layout. This list of countries will be hardcoded in the app for now. We will make this list dynamic in the coming tutorials. After we are done, the app will look similar to this:
.

Create CountryList Widget

We are going to create a seperate CountryList widget to display listview containing countries details.

class CountryList extends StatelessWidget {
  final List<String> countries = [ "Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cabo Verde", "Cameroon", "Chad", 
  "Comoros ", "Congo (the)", "Côte d'Ivoire", "Djibouti", "Egypt", "Equatorial Guinea", "Eritrea", "Ethiopia", 
  "Gabon", "Gambia ", "Ghana", "Guinea", "Guinea-Bissau", "Kenya", "Lesotho", "Liberia", "Libya", "Madagascar", "Malawi", "Mali"];
  @override
  Widget build(BuildContext context) {
    //Build method now contain just an empty container. We will add listview to this function.
    return Container();
  }
}

countries contain name of some random countries.

Some commononly used widget

Container
Container widget is a convenience widget that is used to contain other widgets. It helps to positioning and sizing of different widgets. It is similar to div in html.

Center(
  child: Container(
    margin: const EdgeInsets.all(10.0),
    color: Colors.amber[600],
    width: 48.0,
    height: 48.0,
  ),
)

Container widget with width and height as 48.0 is created. color property defines the background color of the container. In this case it is shade of ember.

Colors class contains different predefined colors. Details of these colors can be found on this page

To learn more about Container widget, you can refer Flutter doc about Container.

Row
A widget that displays its children in a horizontal array. Spacing between children is controlled using mainAxisAlignment property. It is similar to Flexbox in css with direction:row.

Row(
  children: const <Widget>[
    Expanded(
      child: Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: FlutterLogo(),
      ),
    ),
  ],
)

To learn more about Row widget, you can refer Flutter doc about Row.

Column
A widget that displays its children in a vertical array. It is similar to Row except that it shows it children in vertical direction instead of horizontal. Spacing between children is controlled using mainAxisAlignment property. It is similar to Flexbox in css with direction:column.

Column(
  children: const <Widget>[
    Text('Deliver features faster'),
    Text('Craft beautiful UIs'),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: FlutterLogo(),
      ),
    ),
  ],
)

To learn more about Column widget, you can refer Flutter doc about Column.

Card
A material design card: a panel with slightly rounded corners and an elevation shadow.

Center(
  child: Card(
    child : Container(
      height: 100,
      width: 200,
      child: Center(
        child: Text('This is a Card', style: TextStyle(fontWeight: FontWeight.w500)),
      ),
    ),
  ),
)

Center(
  child: Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: Icon(Icons.album),
          title: Text('The Enchanted Nightingale'),
          subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            TextButton(
              child: const Text('BUY TICKETS'),
              onPressed: () {/* ... */},
            ),
            const SizedBox(width: 8),
            TextButton(
              child: const Text('LISTEN'),
              onPressed: () {/* ... */},
            ),
            const SizedBox(width: 8),
          ],
        ),
      ],
    ),
  ),
)

To learn more about Card widget, you can refer Flutter doc about Card.

Padding
A widget that is used to add padding to its child. It shrinks its child by the given padding.

const Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Hello World!'),
  ),
)

To learn more about Padding widget, you can refer Flutter doc about Padding.

ListView
ListView is used to display a scrollable list. It displays its children one after another in the scroll direction(vertical by default).
ListView accepts a children property. This children property will contain list of items we want to display.

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

ListView displays all its children at once. These may lead to some performance issue if the list is very large. For this reason, we generally use ListView.builder constructor. It builds on demand and creates items as they’re scrolled onto the screen. It requires a itemBuilder function which takes build context and index of the current item and return a widget based on the index. It also takes several other optional property, one of which is itemCount and it represents the total no of items in the list.
To learn more about ListView widget, you can refer Flutter doc about ListView.

Now we are equipped with enough knowledge to build our required screen.
Our required will have a ListView of Cards. This Card will contain a Row of circular avatar for country abbreviation and country name. There will be padding inside card so that the content of the card does not touch edge of the card. And there will be padding outside the card as well so that the there will be spacing between cards. Now let's write code to achieve this result.

class CountryList extends StatelessWidget {
  final List<String> countries = [ "Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cabo Verde", "Cameroon", "Chad", 
  "Comoros ", "Congo (the)", "Côte d'Ivoire", "Djibouti", "Egypt", "Equatorial Guinea", "Eritrea", "Ethiopia", 
  "Gabon", "Gambia ", "Ghana", "Guinea", "Guinea-Bissau", "Kenya", "Lesotho", "Liberia", "Libya", "Madagascar", "Malawi", "Mali"];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (BuildContext context, int index) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
        child: Card(
          child: Container(
            height: 70,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.red,
                    child: Text(
                      countries[index].substring(0, 2),
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: Text(
                        countries[index],
                        style: TextStyle(fontSize: 18),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

To display the CountryList widget we set body of Scaffold in HomePage widget as body: CountryList().

So your HomePage widget will look like this:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First App')
      ),
      body: CountryList(),
    );
  }
}

CircleAvatar widget display a circular avatar with content as its child. Here it displays the first two letter of the country name.

Expanded widget causes a child to expand to fill the available horizontal space. Because of that Text widget with country name takes the all the space within the Card except the space taken by CircleAvatar widget.

mainAxisAlignment: MainAxisAlignment.spaceBetween of Row widget places the free space evenly between the children ie. CircleAvatar and Expanded widget.

EdgeInsets.all(8.0) makes all ie. top, bottom, right and left padding to be 8.0. Whereas EdgeInsets.symmetric(horizontal: 8.0) makes only the horizontal paddings ie. left and right to be 8.0.

We are almost done with this tutorial. There is just one issue we need to counter at the moment ie. background color of all the CircleAvatar is Colors.red. We need to make this random. So that all the CircleAvatar have different background Color.
To achieve this result, we need to generate random color. hex value.

To display a color in flutter using its hex value. We use Color class. General format is Color(0xff123456). Where 0x shows its a hexadecimal number. Next two digits(ff) indicates the opacity of color. Next six digits(123456) indicates the hex value of the color.

We will use following code to generate random hex value

Color(
(Random().nextDouble() *
  0xFFFFFF)
  .toInt(),).withOpacity(1.0)

Random().nextDouble() generates a random double or floating point value from 0.0, inclusive, to 1.0, exclusive. We multiply this random value with largest possible hex value(white color). So it generates hex value of a color between black and white. This hex value is a double value. We convert it to a int using toInt() function. withOpacity(1.0) makes the opacity of Color 1.0.
Random() function is defined in dart:math so we need to import it first.

Final code

main.dart

import 'package:flutter/material.dart';
import 'dart:math';
void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First App')
      ),
      body: CountryList(),
    );
  }
}


class CountryList extends StatelessWidget {
  final List<String> countries = [ "Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cabo Verde", "Cameroon", "Chad", 
  "Comoros ", "Congo (the)", "Côte d'Ivoire", "Djibouti", "Egypt", "Equatorial Guinea", "Eritrea", "Ethiopia", 
  "Gabon", "Gambia ", "Ghana", "Guinea", "Guinea-Bissau", "Kenya", "Lesotho", "Liberia", "Libya", "Madagascar", "Malawi", "Mali"];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (BuildContext context, int index) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
        child: Card(
          child: Container(
            height: 70,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  CircleAvatar(
                    backgroundColor: Color(
                      (Random().nextDouble() * 0xFFFFFF).toInt(),
                    ).withOpacity(1.0),
                    child: Text(
                      countries[index].substring(0, 2),
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: Text(
                        countries[index],
                        style: TextStyle(fontSize: 18),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Wrapping up

So we are done with this part of tutorial. In this tutorial we learned to create our first flutter app with a beautiful listview containing different country name. In the next tutorial, we will learn to make app dynamic by fetching the coutries data from api instead of hardcoding it in the app.

Flutter Series - Fetch data from the internet

Tanweer Anwar ・ Jun 5 '21

#flutter #dart #android #ios

You can find the source code of this tutorial on github.

tanweer919 / Flutter-tutorial

Flutter tutorial

This repo contains all the apps built in Flutter tutorial series.

View on GitHub

The source code for all of the app we are going to build in this series will live in different directory of this repo. For this tutorial source code is in country_list.

So that is it for me. See in you next tutorial. Thank you and Goodbye👋👋.

Flutter Series - Dart for Flutter

Tanweer Anwar — Thu, 24 Dec 2020 20:49:28 +0000

Do you want to build cool mobile apps that you can show to the world? Do you find native mobile development difficult? Do you want to build feature-rich app quickly?
If your answer to any of the above question is "yes", then don't worry Flutter is here for you. In this series, I will try to cover all the concepts of that you are required to know to build an app. Starting from the very basic ie. Dart language itself.

Flutter

According to Google, creator of the framework:
Flutter SDK is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
In simple words, it is a framework to build applications with beautiful UI that provides native performance. You can build apps for different platform such as mobile, web or desktop(support for even more platform is coming soon) using Flutter and that too with a single codebase🚀.

In this series, there will be a number of posts. Each covering certain concepts which you should to know to take full advantage of Flutter. This series will be structured in a way so that you incremently learn new concepts and use it in your app. Today's post will be about the basics of Dart, language in which flutter apps are written.

Let's get started

Dart

Dart is an object oriented, high level language like python, java or c++. It is used to build mobile, web and desktop applications.

Before starting I want to point out that you can run all the below example in DartPad Open DartPad.
Just make sure to write all your code in main() function.

So let's start with all the dart concepts you should know to start with flutter.

Variables

You can define variables in Dart using var keyword:

var name = 'Bob';

Dart compiler implicitly infer variable name to be of String datatype.

You can explicitly declare the datatype of a variable like this:

String name = 'Bob';

Dart is statically-typed language, meaning type checking is done at compile time. Whenever you try to assign variable of a particular datatype with data of different type, it will result in assignment error.

For example:

var name = 'Bob';
name = 1;

which result in:

Error: A value of type 'int' can't be assigned to a variable of type 'String'.

If a variable isn’t restricted to a single type, specify the Object or dynamic type:

dynamic name = 'Bob';

You can assign name variable to any other type at a later stage without any error like:

name = 123;

Uninitialized variables have an initial value of null.

int count;
print(count);

Output:

null

Final and const
If you want to make a variable read-only, declare it as final using final keyword. A final variable can be set only once.
Changing it again results in Error: a final variable can only be set once.
Example:

final name = 'Bob'; // Without a type annotation
final String nickname = 'Bobby';

If you try to change name variable it will result in error.

name = 'Alice';

Output:

Error: Can't assign to the final variable 'name'.

const is used for variables that you want to be compile-time constants. const variables can only assigned with a expression which always returns a constant value.
Example:

const a = 2 * 3;

This is valid because 2 * 3 will always return a constant value ie. 6.
But if you try to do something like this:

int a = 3;
const b = 2 * a;

Results in:

Error: Not a constant expression.

because value of variable a can change. So, this expression is not constant.
You can’t change the value of a const variable just like final variable:

const a = 1;
a = 2; // Error: Constant variables can't be assigned a value.

If you want to define a class variable(variable defined at class level) as const, define it as static const.

Built-in types in dart
The Dart language has special support for the following types:

numbers
strings
booleans
lists (also known as arrays)
sets
maps
runes (for expressing Unicode characters in a string)
symbols

Numbers
Dart numbers come in two types ie. int and double.
int represents integer value while double represents floating or decimal point values.
Example:

int count = 5;
double temperature = 25.5;

String
A Dart string is a sequence of characters. You can use either single or double quotes to create a string:

String s1 = 'Single quotes work well for string literals.';
String s2 = "Double quotes work just as well.";
String s3 = 'It\'s easy to escape the string delimiter.';
String s4 = "It's even easier to use the other delimiter.";

You can put the value of an expression inside a string by using ${expression}. If the expression is an identifier, you can skip the {}.
Example:

double temperature = 16.0;
String s1 = 'Current temperature: ${(temperature * 9/5)+ 32}Fahrenheit';
int count = 10;
String s2 = 'Total count: $count';

You can concatenate strings using adjacent string literals or the + operator:

String s1 = 'String ' 'concatenation';
String s2 = 'String ' + 'concatenation';
print(s1);
print(s2);

Output:

String concatenation
String concatenation

String type have a number of in-built methods(functions) which you can use to modify the string.

toUpperCase(): Converts all characters in the string to upper case.

toLowerCase(): Converts all characters in the string to lower case.

substring(int startIndex, [int? endIndex]): Returns the substring of this string that extends from startIndex, inclusive, to endIndex, exclusive.

contains(Pattern other, [int startIndex = 0]): Returns true if the string contains a match of other string.

compareTo(String other): Compares this string to other. It returns an integer based on comparison.

indexOf(Pattern pattern, [int start = 0]): Returns the position of the first match of pattern in this string, starting at start, inclusive.

startsWith(Pattern pattern, [int index = 0]): Returns true if this string starts with a match of pattern.

endsWith(String other): Returns true if this string ends with other.

Example:

String s = 'Hello from dart world';
print(s.toUpperCase());
print(s.toLowerCase());
print(s.substring(0,5));
print(s.contains('dart'));
print(s.compareTo('Hello World'));
print(s.indexOf('dart'));
print(s.startsWith('Hello'));
print(s.endsWith('dart'));

Output:

HELLO FROM DART WORLD
hello from dart world
Hello
true
1
11
true
false

Parameters in [] are optional.

There are many more in-built string methods in dart which I have not covered. You can find all the other methods here.

Conditional property access(?)
if s is null or uninitialized, it will cause exception Cannot read property of null. To avoid that dart has introduced a conditional property access operator(?). You can use it like String s2 = s?.toUpperCase();.
So if s is null, then instead of resulting in exception s2 will become null too.

Null-aware operator(??)
Null-aware operator(??) returns the expression on its left unless that expression’s value is null, in which case it evaluates and returns the expression on its right. In the above example if you want to assign a default value, use it with null-aware opeator(??):

String s;
String s2 = s?.toUpperCase() ?? "Empty String";

Output:

Empty String

Booleans
To represent boolean values, Dart has a type named bool. Only two values can be assigned to it true and false.
Example:

bool a = true;
String s = '';
bool isEmpty = s.isEmpty;

Unlike other languages, you cannot use non boolean values as a condition. if(nonBooleanValue) is invalid.

Lists
In Dart, List is a collection of similar objects like arrays in other languages, so most people just call them lists.
Here is a simple list:

var list = [1, 2, 3];

Dart compiler infer type of list variable as List<int>.If you try to add non-integer objects to this list, the analyzer or runtime raises an error.
Error: A value of type 'String' can't be assigned to a variable of type 'int'.

You can define type of list explicitly as List<type>. For example list of int can be assigned a type List<int>.

List index starts at 0 and goes upto length of the list - 1.
You can use .length to find length of string.
Example:

List<int> list = [1, 2, 3, 4, 5];
print(list.length);

Output:

You can combine two lists using + operator:

List<int> list = [1, 2];
List<int> list1 = [3,4];
List<int> list2 = list + list1;
print(list2);

Output:

[1, 2, 3, 4]

Dart 2.3 introduced the spread operator (...).
For example, you can use the spread operator (...) to insert all the values of a list into another list:

var list = [1, 2, 3];
var list2 = [0, ...list];
print(list2);

Output:

[0, 1, 2, 3]

If list is null. It will cause exception. To avoid that you need to first check for null and then do the operation. This also can be achieved using a null-aware spread operator (...?):

var list;
var list2 = [0, ...?list];
print(list2);

Output:

[0]

Dart 2.3 also introduced collection if and collection for, which you can use to build collections using conditionals (if) and repetition (for).

bool promoActive = true;
var nav = [
  'Home',
  'Furniture',
  'Plants',
  if (promoActive) 'Outlet'
];
var listOfInts = [1, 2, 3];
var listOfStrings = [
  '#0',
  for (var i in listOfInts) '#$i'
];
print(nav);
print(listOfStrings);

Output

[Home, Furniture, Plants, Outlet]
[#0, #1, #2, #3]

You can use .add() method to add values at the end of list:

var list = [1, 2, 3];
var list2 = list.add(4);
print(list2);

Output:

[1, 2, 3, 4]

Map
A map is an object that associates keys and values. Both keys and values can be any type of object. Each key occurs only once, but you can use the same value multiple times. Dart support for maps is provided by map literals and the Map type.
Example:

var elements = {
  // Key:    Value
  'first': 'hydrogen',
  'second': 'helium',
  'third': 'lithium'
};

var nobleGases = {
  2: 'helium',
  10: 'neon',
  18: 'argon',
};

Dart infer type of elements as Map<String, String> and nobleGases as Map<int,String>.If you try to add the wrong type of value to either map, the analyzer or runtime raises an error.
You can create the same objects using a Map constructor:

var elements = Map();
elements['first'] = 'hydrogen';
elements['second'] = 'helium';
elements['third'] = 'lithium';

var nobleGases = Map();
nobleGases[2] = 'helium';
nobleGases[10] = 'neon';
nobleGases[18] = 'argon';

You can add new key-pair value to existing map as:
elements['fourth'] = 'beryllium';
You can retrieve a value from map using its key.
String thirdElement = elements['third'];
If you look for a key that isn’t in a map, you get a null in return:
print(elements['fifth']);
Output:
null
Use .length to get the number of key-value pairs in the map:

Map<int, String> numberToString = {
  1: 'one',
  2: 'two',
  3: 'three',
  4: 'four',
  5: 'five'
};
print(numberToString.length);

Output:

As of Dart 2.3, maps support spread operators (... and ...?) and collection if and for, just like lists do:

Map<String,int> map = {
  "violet": 1,
  "indigo": 2,
  "blue": 3
};
Map<String, int> map2 = {
  "green": 4,
  "yellow": 5,
  "orange": 6,
  "red": 7
};
Map<String, int> coloursOfRainbow = {...map, ...map2};
print(coloursOfRainbow);

Output:

{violet: 1, indigo: 2, blue: 3, green: 4, yellow: 5, orange: 6, red: 7}

Conditional statement
Dart support if and else statement, like any other high level language.
if statement contains a boolean expression. Followed by a block of statement which execute only when boolean condition is true. if block can be followed by an else block which only executes when boolean condition for if block is not satisfied.

if(boolean_expression){ 
   // statement(s) will execute if the Boolean expression is true. 
} else { 
   // statement(s) will execute if the Boolean expression is false. 
}

Conditional expressions
Dart lets you concisely evaluate expressions that might otherwise require if-else statements:
condition ? expr1 : expr2
If condition is true, evaluates expr1 (and returns its value); otherwise, evaluates and returns the value of expr2.
Example:

int age = 21;
String result = age >= 18 ? 'Eligible to vote' : 'Not Eligible to vote';
print(result);

Output:

Eligible to vote

Loops
Loops are used execute a series of statements repeatedly for a number of times.Dart support generally 4 types of looping statement.

1. for loop
The for loop is used when we want to execute block of code known times. In Dart, basic for loop is similar as it is in C. The loop takes a variable as iterator and assign it with an initial value, and iterate through the loop body as long as the test condition is true.
Syntax:

for(initialization;conditions;increment/decrement) {
  //body of loop
}

Example:

int count = 5;
for(int i = 1; i <= count; i++) {
  print('#$i');
}

Output:

#1
#2
#3
#4
#5

2. for..in loop
The for..in loop takes an object as iterator, and iterates through the elements one at a time in the sequence. In each iteration an element is fetched and stored in the loop variable. When there is no more element in iterator, loop is terminated.
Syntax:

for(var loopVariable in iterator){
  //body of loop
}

Example:

var list = [1, 2, 3, 4];
for(var element in list){
  print(element);
}

Output:

3. while loop
The while loop will execute a block of statement as long as a test expression is true.
Syntax:

while(condition) {
  //body of loop
}

Example:

int count = 4;
int i = 0;
while(i < count) {
  print(i);
  i++;
}

Output:

4. do..while loop
The do…while statement executes loop statements and then test the condition for next iteration and executes next only if condition is true.

int count = 4;
int i = 0;
do{
  print(i);
  i++;
}while(i < count);

Output:

Functions
Functions are block of reusable code that are used to peform a single related action. Function may or may not take inputs and may or may not return an output. Dart is a true object-oriented language, so even functions are objects and have a type, Function. This means that functions can be assigned to variables or passed as arguments to other functions.

Syntax:

returntype name(parameters) {
  //body
}

Example:

bool isEligibleToVote(int age){
return age >= 18;
}
bool result = isEligibleToVote(16);
bool result2 = isEligibleToVote(21);
print(result);
print(result2);

Output:

false
true

If function does not return anything, use void as return type.

Although Dart recommends type annotation, function would still work if you omit the return type.

For functions that contain just one expression, you can use a shorthand syntax:
bool isEligibleToVote(int age) => age >= 18;
is equivalent to

bool isEligibleToVote(int age) {
  return age >= 18;
}

Parameters
A function can have any number of required positional parameters. These can be followed either by named parameters or by optional positional parameters (but not both).
Positional paramters Example:

int sum(int a, int b,[int c]) {
  return a + b + (c ?? 0);
}
print(sum(1, 3, 5));
print(sum(1, 3));

Output:

9
4

Here a and b are required positional parameters while c in optional positional parameters.
[] represents optional positional parameters.

Named parameters
Named parameters are optional unless they’re specifically marked as required.
When defining a function use{type1 param1, type2 param2,...} to specify named parameters.
When calling a function, you can specify named parameters using paramName: value. For example:

void display({String name, int age}) {
 print('$name is $age years old.');
}
display(name: 'Mark', age: 16);

Output:

Mark is 18 years old.

Although named parameters are a kind of optional parameter, you can annotate them with @required to indicate that the parameter is mandatory — that users must provide a value for the parameter. For example:

void display({String name, @required int age}) {
 print('$name is $age years old.');
}

To use the @required annotation, depend on the meta package and import package:meta/meta.dart.

Default parameters value
Your function can use = to define default values for both named and positional parameters. The default values must be compile-time constants. If no default value is provided, the default value is null.
void enableFlags({bool bold = false, bool hidden = false}) {...}

String say(String from, String msg,
    [String device = 'carrier pigeon']) {
  var result = '$from says $msg with a $device';
  return result;
}
print(say('Bob', 'Hello'));

Output:

Bob says Hello with a carrier pigeon.

The main() function
Every app must have a top-level main() function, which serves as the entrypoint to the app. The main() function returns void and has an optional List<String> parameter for arguments.
Example:

void main() {
  print('Hello world from main function.');
}

Output:

Hello world from main function.

Anonymous functions
You can also create a nameless function called an anonymous function. An anonymous function looks similar to a named function— zero or more parameters, separated by commas and optional type annotations, between parentheses.
([[Type] param1[, …]]) { //body of function };
Example:

var list = ['apples', 'bananas', 'oranges'];
list.forEach((item) {
  print('${list.indexOf(item)}: $item');
});

Output:

0: apples
1: bananas
2: oranges

Here
(item) { print('${list.indexOf(item)}: $item'); }) is anonymous function. It is executed for each element of the list. Anonymous function can also be assigned to a variable.

List.forEach() function
The forEach() method receives a function as an argument and executes it once for each array element. It returns null.
Example:

var list = ['apples', 'bananas', 'oranges'];
list.forEach((item) {
  print('${list.indexOf(item)}: $item');
});

Output:

0: apples
1: bananas
2: oranges

List.map() function
The map method receives a function as a parameter. Then it applies it on each element and returns an new Iterable populated with the results of calling the provided function. This Iterable can be converted to list by calling toList() method on it.
Example:

var list = [1, 2, 3];
var squaredList = list.map((i) {
  return i * i;
}).toList();
print(squaredList);

Output:

[1, 4, 9]

Cascade notation (..)
Cascades .. allow you to make a sequence of operations on the same object. In addition to function calls, you can also access fields on that same object. This often saves you the step of creating a temporary variable and allows you to write more fluid code.
Example:

var list = [1, 2, 3, 4];
list
  ..add(5)
  ..add(6)
  ..first = 2;
print(list);

Output:

[2, 2, 3, 4, 5, 6]

Here list.add(5) method is applied on list which adds 5 at the end of list, then list.add(6) method is applied on list which adds 6 at the end of list and at last list.first = 2 which makes first element as 2.

list.first is used to retrieve or change first element of list. Simliarly, list.last is used to retrieve or change last element of list.

Classes
Dart is an object-oriented language with classes and mixin-based inheritance. Every object is an instance of a class and all classes descend from Object.
A class can be created using class keyword.
Example :

class Point {
...
}

Instance variables
Here how declare instance variable:

class Point {
  double x;
  double y;
}

All uninitialized instance variables have the value null.

Constructors
Declare a constructor by creating a function with the same name as its class. Constructors are generally used to initialize instance variable of a class:

class Point {
  double x, y;

  Point(double x, double y) {
    // There's a better way to do this, stay tuned.
    this.x = x;
    this.y = y;
  }
}

The this keyowrd is used to refer to current instance of the class.

The pattern of assigning a constructor argument to an instance variable is so common, Dart has syntactic sugar to make it easy:

class Point {
  double x, y;
  Point(this.x, this.y);
}

Named constructor
Use a named constructor to implement multiple constructors for a class or to provide extra clarity:

class Point {
  double x, y;

  Point(this.x, this.y);

  // Named constructor
  Point.origin() {
    x = 0;
    y = 0;
  }
}

Initializer list
You can initialize instance variables before the constructor body runs. Use : after constructor parameter list to use initializer and separate initializers with commas.
Example:

class Point {
  double x, y;

  Point(this.x, this.y);

  // Named constructor
  Point.origin() {
    x = 0;
    y = 0;
  }

  //Initializer list
  Point.fromJson(Map<String, dynamic> parsedJson) :
    this.x = parsedJson['x']
    this.y = parsedJson['y'] {
    //body of the constructor
  }
}

Methods
Functions defined within class which represents a specify purpose are called methods. Methods of a class have access to instance variables and this.
The distanceTo() method in the following sample is an example of an instance method:

import 'dart:math';

class Point {
  double x, y;

  Point(this.x, this.y);

  double distanceTo(Point other) {
    var dx = x - other.x;
    var dy = y - other.y;
    return sqrt(dx * dx + dy * dy);
  }
}

import keyword is used to import objects and methods from other packages like built-in packages or from other files. In this example we are importing sqrt() function from dart:math package.

Instance of a class
Instance of a class can be created by calling constructor the class. This instance contains property and methods of the class. Those property and methods can be accessed using . operator.
Example:

import 'dart:math';

class Point {
  double x, y;

  Point(this.x, this.y);

  double distanceTo(Point other) {
    var dx = x - other.x;
    var dy = y - other.y;
    return sqrt(dx * dx + dy * dy);
  }
}
void main() {
  Point point = Point(2.0, 4.0);
  Point point2 = Point(2.0, 6.0);
  print(point2.x);
  print(point2.y);
  print(point2.distanceTo(point));
}

Output:

2.0
6.0
2.0

Unlike some other languages, new keyword is optional while creating instance of a class.

Static variables
Static variables (class variables) are useful for class-wide state and constants:

class Point {
  static const originX= 0.0;
  static const originY = 0.0;
  //...
}

Static methods
Static methods (class methods) don’t operate on an instance, and thus don’t have access to this ie. they can access current instance properties. They do, however, have access to static variables. They can be accessed directly from class without the need of creating an instance.
Example:

class Point {
  double x, y;
  static const originX= 0.0;
  static const originY = 0.0;

  Point(this.x, this.y);

  static String currentOrigin() {
    return 'Current origin: ($originX, $originY)';
  }
}
void main() {
  print(Point.currentOrigin());
}

Output:

Current origin: (0.0, 0.0)

Public and Private members
Properties and methods of a class are public, meaning they can be accessed from outside class using instance of the class.
Example:

class Point {
  double x, y;

  Point(this.x, this.y);
}
void main() {
  Point point = Point(3.0, 6.0);
  print(point.x);
  print(point.y);
}

Output:

3.0
6.0

If you want to make an property or method as private, use _ before property or method name. Unlike other languages, here private doesn't mean it is available only to the class it is in, private means it is available in the library.

Getters and setters
Getters and setters are special methods that provide read and write access to an object’s properties. Getters are used to read an object's properties while setters are set an object property. Each instance variable has an implicit getter, plus a setter if appropriate. You can create additional properties by implementing getters and setters, using the get and set keywords:

class Point {
  double _x, _y;

  Point(this._x, this._y);

  double get xCoordinate => this._x;
  double get yCoordinate => this._y;

  void set XCoordinate(double x) => this._x = x;
  void set YCoordinate(double y) => this._y = y;
}
void main() {
  Point point = Point(3.0, 6.0);
  point.XCoordinate = 4.0;
  point.YCoordinate = 8.0;
  print(point.xCoordinate);
  print(point.yCoordinate);
}

Output:

4.0
8.0

Inheritance
Like any other object oriented language, Dart supports inheritance. A class can inherits from other class. Class which inherits are called child class or subclass and class which is being inherited is called parent or super class. Subclass inherits all the property of the parent class.
Inheritance is achieved using extends keyword.
In the coming flutter tutorials, you will quite often come across example like this:

import 'package:flutter/material.dart';
class Home extends StatelessWidget {
  ...
}

Here Home class is inheriting properties and methods from StatelessWidget class defined in package:flutter/material.dart package.

Method overriding
You can override method defined in parent class by defining method with same name and parameter list as the method in parent class. You can use the @override annotation to indicate that you are intentionally overriding a member:

import 'package:flutter/material.dart';
class Home extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Here we are overriding build(BuildContext context) method defined in parent class ie. StatelessWidget class.

Enumerated types
Enumerated types, often called enumerations or enums, are a special kind of class used to represent a fixed number of constant values.

Using enums
Declare an enumerated type using the enum keyword:

enum Color { red, green, blue }
Each value in an enum has an index getter, which returns the zero-based position of the value in the enum declaration. For example, the first value has index 0, and the second value has index 1.
To get a list of all of the values in the enum, use the enum’s values constant.
Example:

enum Color { red, green, blue}
void main() {
  List<Color> colors = Color.values;
  print(colors);
  print(Color.red.index);
  print(Color.green.index);
  print(Color.blue.index);
}

Output:

[Color.red, Color.green, Color.blue]
0
1
2

Assert
During development, use an assert statement — assert(condition, optionalMessage); — to disrupt normal execution if a boolean condition is false.

String text;
assert(text != null, 'Text is null');

Output:

Failed assertion: line 3 pos 10: 'text != null': Text is null

In production code, assertions are ignored, and the arguments to assert aren’t evaluated.

Exception
Your Dart code can throw and catch exceptions. Exceptions are errors indicating that something unexpected happened. You can raise manually using throw keyword.
throw Exception('this is a sample exception')

Exception handling
Exception handling is an important part of development because unhadled exception can break an app. Exception handling allows you to handled those exception before any harm is done.
In Dart, exception handling is done using try..catch statement.

try statement
In try block, we generally put lines of code which may result in exception.

catch statement
Catching, or capturing, an exception stops the exception from propagating (unless you rethrow the exception). Catching an exception gives you a chance to handle it:

int x = 8;
int y = 0;
try {
  res = x ~/ y; 
  print(res);
} on IntegerDivisionByZeroException { 
  print('Cannot divide by zero'); 
} catch (e) {
  print('Other types of exception');
}

Output:

Cannot divide by zero

use on keyword to accept exception of a specific type while catch (e) without any specific exception catches all types of exception.

Finally
To ensure that some code runs whether or not an exception is thrown, use a finally clause.

try {
  //Code that may result in exception.
} catch (e) {
  // Handle the exception first.
} finally {
  // Then clean up.
  //This code always runs irrespective of whether any exception occured or not.
}

We are going to use exception handling a lot when we will be trying fetch data from internet or when trying to access a device functionality like gps or camera.

Reference
Most of the example in the tutorial can be found on [Official Dart Language Tour] page(https://dart.dev/guides/language/language-tour). You can refer that page for an even more in-depth tutorial of the language.

Conclusion

So this was a comprehensive tour of the dart language. I tried to cover up most of the concepts, we will be frequently using in the series. This tutorial can also be used as a guide or reference for the future.
This was quite a long tutorial, so in inadvertently some errors or typos may have crept in the tutorial. I would very much appreciate, if someone can point out those errors and typos.

So you all in the next tutorial which will be

Basics of Flutter

Thank you and Goodbye👋👋.