Flutter - How can draw route on google map between markers.

Route on google map is the easiest way to reach somewhere. Just enter the address of your source and destination point. After that, you will see the right way to go there and you can control the route map.  Google maps highlight the suggested route in a bright blue color and include other possible routes in gray. It is always safe to use a driving map when you are not aware of the place.

Read More

Flutter - Collapsing Toolbar OR Sliver App Bar

If you are an Android application developer. Then you definitely know about Collapsing Toolbar. It is a wrapper for Toolbar which implements a collapsing app bar. Flutter team calling it Sliver App bar. It displays an image or background in the upper part of the screen, occupying a fixed space, so that later, by scrolling upwards, the content changes and becomes a navigation bar in iOS or toolbar in the case of Android. 

In Flutter, Sliver App bar is designed to be used as a direct child of an App Bar. This type of widget is commonly seen in the User Profile Screen. You can check it with Whatsapp user profile screen.

Let's have look on Sliver App Bar properties in the following diagram that flutter providing us.

• leading: A widget to display before the title. This is the widget where usually a hamburger icon or back button is displayed.
• title: Toolbar title goes here wrapped in a Text widget.
• actions: It is the right side of App Bar. Here, you can declare other option of apps like search, setting and profile etc.
• bottom: The bottom is usually used for a TabBar below the Appbar.
• flexibleSpace: This widget is used to create a Collapsing Toolbar effect with Appbar.

Read More

Kotlin - Higher order functions

In Kotlin, functions can be represented as values by using lambdas or function references.  Regular functions receive only data parameters, whereas a function that receives another function as a parameter and returns a function as a result is called a Higher-order function.

Therefore, a higher-order function is any function to which you can pass a lambda or a function reference as an argument, or a function which returns one, or both.

Read More

Flutter - Capture Image from camera or gallery and apply crop.

In modern application, if you implementing user profile feature. So, you should implement user profile pic and allow a user to set and change profile pic. A user can set a profile pic from his/her mobile gallery or capture image from camera. 

Besides just picking images from gallery and camera. You can crop it with desired aspect ratio. It is very important if you noticed every app like Facebook, Google etc asks you to crop the image into a square because it fits the best for different use cases.

In this post, we’ll develop an application that picks an image from camera or gallery. After that, we crop it for fit in a circular image widget.

Read More

Flutter - GridView builder example.

In a mobile application, GridView is a view group that displays items in a two-dimensional scrolling grid (rows and columns).  Users can select any grid item by clicking on it. By default GridView scrollable, so we don’t need to use ScrollView or anything else with GridView.

The GridView objects may be a Text and Image or a view group which has both an image and some text. An example of GridView is your default image gallery in mobile. Where you have a number of items displayed using them in a grid manner.

Grid view helps users when they’re examining details. For example, if a user is shopping for a shirt, they’ll have a specific type in mind. It’s only after the user has narrowed down the content to a category that grid view is most effective. But once the user is in the category of shirts they want, the images will have more relevancy. The user can scan the shirts and spot certain details they’re looking for with ease.

To implement grid view in the Flutter application, we have GridView widget. The simplest way to get started using grids is by using the  GridView.count constructor, because it allows us to specify how many rows or columns we’d like.

In this post, we'll hit an API and get the detail of countries and display it in the grid view as you can see the final output below. 

This will help us visualize how GridView works. So, let's start its implementation with the following steps.

Creating a new Project

1. Create a new project from File ⇒ New Flutter Project with your development IDE. 
2. Open main.dart file and edit it. As we have set our theme and change debug banner property of Application.

main.dart
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'World';
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appTitle,
      theme: new ThemeData(
        primaryColor: const Color(0xFF02BB9F),
        primaryColorDark: const Color(0xFF167F67),
        accentColor: const Color(0xFFFFAD32),
      ),
      home: new HomePage(title: appTitle),
    );
  }
}

3. Now create HomePage class inside of main.dart as you can below. Here we using Scaffold as a root widget that contains App bar and FutureBuilder. FutureBuilder displays a progress bar until we getting detail of counties from the server.

main.dart
class HomePage extends StatelessWidget {
  final String title;
  HomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title,
        style: new TextStyle(
          color: const Color(0xFFFFFFFF),
        ),
        ),
      ),
      body: new FutureBuilder<List<Country>>(
        future: fetchCountry(new http.Client()),
        builder: (context, snapshot) {
          if (snapshot.hasError) print(snapshot.error);

          return snapshot.hasData
              ? new CountyGridView(country: snapshot.data)
              : new Center(child: new CircularProgressIndicator());
        },
      ),
    );
  }
}

4. After that create network layer of the application that get list of countries from the server and parse it. As you can see above, we have called  fetchCountry method for it

networklayer.dart
import 'dart:async';
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter_gridview/country.dart';
import 'package:http/http.dart' as http;

Future<List<Country>> fetchCountry(http.Client client) async {
  final response = await client.get('http://restcountries.eu/rest/v2/all');
  // Use the compute function to run parsePhotos in a separate isolate
  return compute(parseData, response.body);
}

// A function that will convert a response body into a List<Country>
List<Country> parseData(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

  List<Country> list =
      parsed.map<Country>((json) => new Country.fromJson(json)).toList();
  return list;
}

5. For contain details of countries, we have to create a model class Country. We'll use it for parse server response JSON and display grid view items.

country.dart
class Country {
  String name;
  String nativeName;
  String flag;
  String capital;
  Country({this.name, this.flag, this.capital,this.nativeName});
  factory Country.fromJson(Map<String, dynamic> json) {
    return new Country(
      name: json['name'] as String,
      nativeName: json['nativeName'] as String,
      flag: json['flag'] as String,
      capital: json['capital'] as String,
    );
  }
}

6. At the end, create gridview.dart class and add GridView in the build method. As you can see below, we have declared the size of gridview items by using List. generate method of GridView.

girdview.dart
  @override
  Widget build(BuildContext context) {
    return new GridView.count(
      primary: true,
      crossAxisCount: 2,
      childAspectRatio: 0.80,
      children: List.generate(country.length, (index) {
        return getStructuredGridCell(country[index]);
      }),
    );
  }

for the class simplicity, we have created a new method getStructuredGridCell. Here, we passing items by using an index in the method, we using Card widget for display detail.

gridview.dart
Card getStructuredGridCell(Country country) {
    return new Card(
        elevation: 1.5,
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            new SvgPicture.network(
              country.flag.replaceAll('https', 'http'),
              height: 130.0,
              width: 100.0,
              placeholderBuilder: (BuildContext context) => new Container(
                  padding: const EdgeInsets.all(60.0),
                  child: const CircularProgressIndicator()),
            ),
            new Padding(
              padding: EdgeInsets.only(left: 10.0),
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(country.name),
                  new Text(country.nativeName),
                  new Text(country.capital),
                ],
              ),
            )
          ],
        ));
  }

If you have followed the article carefully, you can see the app running very smoothly as shown in the video demo. But if you facing any problem.

              

You can get the working project on Github and please feel free to ask in the comment section below.

Read More