DEV Community: Prakash S

Flutter App life cycle

Prakash S — Wed, 01 Sep 2021 03:46:22 +0000

Basically when we are writing a code for any Native applications, We will look for a life cycle events to handle some specific scenarios. Its like handling Thanos gauntlet snap to blip 😇😇

Flutter comes with life cycle events to handle app life cycle for android & ios.

Let's see the code.

To consume the life cycle event, we need to have Stateful widget with WidgetsBindingObserver mixin.

class _HomePageState 
extends State<HomePage> 
with WidgetsBindingObserver {

The mixin WidgetsBindingObserver provides an override didChangeAppLifecycleState where we will notified for certain app life cycle state changes.

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        print('app resumed');
        break;
      case AppLifecycleState.paused:
        print('app paused');
        break;
      case AppLifecycleState.inactive:
        print('app inactive');
        break;
      case AppLifecycleState.detached:
      default:
        print('app detached');
        break;
    }
  }

Finally to get work all these stuff, we need to inform or observe the app life cycle changes using

@override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
  }

Ofcourse dont forget to remove observer on dispose

@override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance!.removeObserver(this);
  }

That's it, we can now handle the app as per the app lifecycle.

For Full sample Github

Happy Fluttering 😇😇

Navigator 2.0 #Flutter

Prakash S — Sat, 29 May 2021 11:31:43 +0000

I am writing this post to make sure flutter devs not to struggle to do the navigation in flutter with Navigator 2.0

Why because, i have struggled a lot to get to know this concept. To be honest, I am not sure did i got all necessary knowledge on this.

First of all, why we need to struggle to know Navigator 2.0. Legacy Navigator itself good isnt it. Yes, it is good for Mobile apps, whereas for website functionality like histories, url update are quite tedious in the old navigator. That is the only reason we are going to Navigator 2.0. The helllllll 😡😡😡

But I bet after going through this post, you might feel it would be enough to do the navigation with ease for your Flutter web/mobile apps.

Let's stop reading and dive into the code

We are going to take a real time scenario with 3 screens

Screen 1 -> Screen 2 (Push with parameter)
Screen 2 -> Screen 1 (Pop)
Screen 1 -> Screen 3 (Push with parameter)
Screen 2 -> Screen 3 -> Screen 1 (PopUntil to remove some page stack)

Key things we need to have for Navigator 2.0

RouteInformationParser

RouterDelegate

User Object/Configuration (in this article i will consider to say as user object)

User object 📜

This is nothing but our own data structure to proceed navigation to serve our purpose.

class UserObject {
  final Type? pageType;
  final String? param;
  final bool isUnknown;

  UserObject.screen1()
      : pageType = Screen1,
        param = null,
        isUnknown = false;

  UserObject.screen2(String parameter)
      : pageType = Screen2,
        param = parameter,
        isUnknown = false;

  UserObject.screen3(String parameter)
      : pageType = Screen3,
        param = parameter,
        isUnknown = false;

  UserObject.unKnown()
      : pageType = null,
        param = null,
        isUnknown = true;
}

RouteInformationParser 🗳️

This deals majorly two things

Parse the route informations like url location, path parameters & query parameters and returns the desired user object.
Restore the route information from user object.

class AppRouteInformationParser extends RouteInformationParser<UserObject> {
  @override
  Future<UserObject> parseRouteInformation(
      RouteInformation routeInformation) async {
    if (routeInformation.location == null) {
      UserObject.unKnown();
    }
    final uri = Uri.parse(routeInformation.location!);
    if (uri.pathSegments.length == 2) {
      final remaining = uri.pathSegments.last;
      final first = uri.pathSegments.first;
      if ('$first' == 'screen2') {
        return UserObject.screen2(remaining);
      }
      if ('/$first' == 'screen3') {
        return UserObject.screen3(remaining);
      }

      return UserObject.unKnown();
    }

    return UserObject.screen1();
  }

  @override
  RouteInformation? restoreRouteInformation(UserObject configuration) {
    RouteInformation error = RouteInformation(location: '/404');
    if (configuration.pageType == null) {
      return error;
    }
    switch (configuration.pageType!) {
      case Screen1:
        return RouteInformation(location: '/');
      case Screen2:
        return RouteInformation(location: '/screen2/${configuration.param}');
      case Screen3:
        return RouteInformation(location: '/screen3/${configuration.param}');
      default:
        return error;
    }
  }
}

RouterDelegate 🪆

I would say this is the heart for the navigation, where all our navigation logic would reside here.

So what basically we may need for navigation

Routes/Route history
Push/Go Forward
Pop/Go Backward

We need to intimate our operations to the framework, to do this we have certain overrides

setNewRoutePath
currentConfiguration

Will deep dive RouterDelegate for better understanding
Very first we need to create our router delegate and extend from framework RouterDelegate and add a mixin with ChangeNotifier & PopNavigatorRouterDelegateMixin

class AppRouterDelegate extends RouterDelegate<UserObject>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<UserObject>

with respect to this, we need to provide 3 information to the framework

setNewRoutePath method
navigatorKey
build method

Along with this we are going to maintain the page history via userObjects property

the idea is simple on push operation we are adding the page to userObjects and providing the same to Navigator widget, similarly we are updating/removing the entry in userObjects on pop operation.


extension RouteExtension on BuildContext {
  Future<void> navigateTo(UserObject path) async {
    (Router.of(this).routerDelegate as AppRouterDelegate).push(path);
  }

  Future<bool> pop() async {
    return await (Router.of(this).routerDelegate as AppRouterDelegate)
        .popRoute();
  }

  Future<bool> popUntil(UserObject path) async {
    AppRouterDelegate deletgate =
        (Router.of(this).routerDelegate as AppRouterDelegate);
    while (deletgate.userObjects.last.pageType != path.pageType!) {
      await this.pop();
    }

    return true;
  }
}

class AppRouterDelegate extends RouterDelegate<UserObject>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<UserObject> {
  GlobalKey<NavigatorState> get navigatorKey => _navigatorKey;

  List<UserObject> _userObjects = [];
  List<UserObject> get userObjects => _userObjects;

  bool _canPop = true;

  GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
  bool get canPop {
    if (_canPop == false) return false;

    return _userObjects.isNotEmpty;
  }

  set canPop(bool canPop) => _canPop = canPop;

  UserObject? get currentConfiguration =>
      userObjects.isNotEmpty ? userObjects.last : null;

  @override
  Widget build(BuildContext context) {
    return Navigator(
        key: _navigatorKey,
        pages: [
          if (userObjects.isEmpty) PageBuilder(UserObject.screen1()).page,
          for (UserObject path in userObjects) PageBuilder(path).page,
        ],
        onPopPage: (route, result) {
          if (!route.didPop(result)) {
            return false;
          }
          if (canPop) {
            pop();
          }
          return true;
        });
  }

  @override
  Future<void> setNewRoutePath(UserObject path) async {
    if (_canPop == false) return SynchronousFuture(null);
    if (path == currentConfiguration) return SynchronousFuture(null);
    _userObjects = _setNewRouteHistory(_userObjects, path);

    notifyListeners();
    return SynchronousFuture(null);
  }

  @override
  Future<bool> popRoute() {
    print('Pop Route');
    return super.popRoute();
  }

  List<UserObject> _setNewRouteHistory(
      List<UserObject> routes, UserObject newRoute) {
    List<UserObject> pathsHolder = [];
    pathsHolder.addAll(routes);
    // Check if new path exists in history.
    for (UserObject path in routes) {
      // If path exists, remove all paths on top.
      if (path.pageType == newRoute.pageType) {
        int index = routes.indexOf(path);
        int count = routes.length;
        for (var i = index; i < count - 1; i++) {
          pathsHolder.removeLast();
        }
        return pathsHolder;
      }
    }

    pathsHolder.add(newRoute);

    return pathsHolder;
  }

  void push(UserObject path) {
    _userObjects.add(path);
    notifyListeners();
  }

  void pop() {
    _userObjects.removeLast();
    notifyListeners();
  }
}

class PageBuilder {
  final UserObject homeRoutePath;

  PageBuilder(this.homeRoutePath);
  Page getPage(UserObject path) {
    switch (path.pageType) {
      case Screen1:
        return MaterialPage(child: Screen1());
      case Screen2:
        return MaterialPage(
            key: ValueKey('screen2 ${path.param}'),
            child: Screen2(
              path.param.toString(),
            ));
      case Screen3:
        return MaterialPage(
            key: ValueKey('screen3 ${path.param}'),
            child: Screen3(path.param.toString()));
      default:
        return MaterialPage(
            child: Scaffold(
          body: Center(
            child: Text('Unknown route'),
          ),
        ));
    }
  }

  dynamic get page => getPage(homeRoutePath);
}

And the final output

For full sample see GitHub

Happy Fluttering 😇😇

BLoC 💪 + flutter ❤️

Prakash S — Fri, 22 May 2020 07:10:22 +0000

BLOC means Business Logic Of Components.
In Simple, this is kind of pattern to isolate the business logic and UI to meet the below things
1) Fast development
2) Easily testable
3) Reusable

In simple way to understand bloc, It takes an input of events and emitting an output of states
Events can be triggered mostly by UI like button tap, scrolling change, Text change etc..
States will be listened in UI to re-render the widgets

Thanks to Flutter Bloc package which comes to save us 🤩🤩.
I would recommend to go through the official documentation of flutter_bloc to get more info 😇.

We will see a real time scenario of user registration with bloc pattern in flutter

Assume we have a registration form, where we are having fields like Username, Password, Confirm password along with it we have register button.
Our model class will look like as below,

RegistrationModel

import 'package:flutter/material.dart';

class RegistrationModel {
  final String userName;
  final String password;
  final String confirmPassword;
  final bool isValidForRegistration;

  factory RegistrationModel.empty() {
    return RegistrationModel("", "", "", false);
  }

  RegistrationModel(this.userName, this.password, this.confirmPassword, this.isValidForRegistration);

  RegistrationModel copyWith(
      {String userName, String password, String confirmPassword, @required isValid}) {
    return RegistrationModel(userName ?? this.userName,
        password ?? this.password, confirmPassword ?? this.confirmPassword, isValid);
  }
}

For the registration form, we may have following business logic
1) Username should be mandatory, length should be greater than 8 and it should not be available in the existing user repository.

2) Password should match 8 character which should contain 1 uppercase, 1 lowercase, 1 number and 1 symbol

3) Confirm password should match with the original password

If all the above condition satisfies, we will enable 👍 the button until then we will disable the register button.

For our scenario - we are going to create a RegistrationBloc to handle business logic, RegistrationEvent to feed input to the bloc & RegistrationState to emit states from Bloc to re-render the UI.

Creating a bloc is very simple, only thing you need to understand your needs upfront to coding.
The scenario for us is pretty clear, so we will jump into the code.

RegistrationState 🤠

We will have base state called RegistrationState which will take RegistrationModel as a parameter and this will be inherited by below two states

1) Initial State
2) Registration Model Changed

In Initial state, we will emit our initial model (empty model)
In Registration Model Changed, we will emit our model which has current values

part of 'registration_bloc.dart';

abstract class RegistrationState extends Equatable {
  final RegistrationModel model;
  const RegistrationState(this.model);
}

class RegistrationInitial extends RegistrationState {
  RegistrationInitial() : super(RegistrationModel.empty());

  @override
  List<Object> get props => [model];
}

class RegistrationModelChanged extends RegistrationState {
  final RegistrationModel model;
  RegistrationModelChanged(this.model) : super(model);

  @override
  List<Object> get props => [model];
}

Registration Event 👻

As per our scenario, we need to listen 3 text field changes
So our events will be,
1) UsernameChanged
2) PasswordChanged
3) ConfirmPasswordChanged

part of 'registration_bloc.dart';

abstract class RegistrationEvent extends Equatable {
  const RegistrationEvent();
}

class UserNameChanged extends RegistrationEvent {
  final String userName;
  UserNameChanged(this.userName);
  @override
  List<Object> get props => [userName];
}

class PasswordChanged extends RegistrationEvent{
  final String password;
  PasswordChanged(this.password);

  @override
  List<Object> get props => [password];
}

class ConfirmPasswordChanged extends RegistrationEvent{
  final String confirmPassword;
  ConfirmPasswordChanged(this.confirmPassword);

  @override
  List<Object> get props => [confirmPassword];
}

Registration bloc 🥴

Create a bloc class need three pre-requisites
1) Class should be inherited from Bloc which is from flutter_bloc package

class RegistrationBloc extends Bloc<RegistrationEvent, RegistrationState>

2) Class should override InitialState

@override
  RegistrationState get initialState => RegistrationInitial();

2) Class should override mapEventToState

@override
  Stream<RegistrationState> mapEventToState(
    RegistrationEvent event,
  ) async* {}

mapEventToState is corresponds to listening the event and emitting the states
Most of our logic going to be defined here only

we are validating the model using the method IsValid


  Future<bool> isValid(
      String userName, String password, String confirmPassword) async {
    bool isValidUser = await _userRepository.isUserAvailable(userName); //username is available to create

    RegExp exp = new RegExp(r"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

    bool isUserNameValid = userName.length >= 8; // user name should have more than or equal to 8 characters
    bool isValidPassword = exp.hasMatch(password); // password should have one small case, one upper case, one number and one symbol
    bool isConfirmPasswordMatched = password == confirmPassword; // confirm password should match with the above password

    return isValidUser &&
        isUserNameValid &&
        isValidPassword &&
        isConfirmPasswordMatched; // true if all the conditions are true, else false
  }

Wrapping up all of these,

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:bloc_tuto/registration/bloc/user_repository.dart';
import 'package:bloc_tuto/registration/model/registration_model.dart';
import 'package:equatable/equatable.dart';

part 'registration_event.dart';
part 'registration_state.dart';

class RegistrationBloc extends Bloc<RegistrationEvent, RegistrationState> {
  final UserRepository _userRepository;
  RegistrationBloc(this._userRepository);

  @override
  RegistrationState get initialState => RegistrationInitial();

  @override
  Stream<RegistrationState> mapEventToState(
    RegistrationEvent event,
  ) async* {
    if (event is UserNameChanged) {
      bool isValidModel = await isValid(
          event.userName, state.model.password, state.model.confirmPassword);
      yield RegistrationModelChanged(state.model
          .copyWith(userName: event.userName, isValid: isValidModel));
    }
    if (event is PasswordChanged) {
      bool isValidModel = await isValid(
          state.model.userName, event.password, state.model.confirmPassword);
      yield RegistrationModelChanged(state.model
          .copyWith(password: event.password, isValid: isValidModel));
    }
    if (event is ConfirmPasswordChanged) {
      bool isValidModel = await isValid(
          state.model.userName, state.model.password, event.confirmPassword);
      yield RegistrationModelChanged(state.model.copyWith(
          confirmPassword: event.confirmPassword, isValid: isValidModel));
    }
  }

  Future<bool> isValid(
      String userName, String password, String confirmPassword) async {
    bool isValidUser = await _userRepository.isUserAvailable(userName); //username is available to create

    RegExp exp = new RegExp(r"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

    bool isUserNameValid = userName.length >= 8; // user name should have more than or equal to 8 characters
    bool isValidPassword = exp.hasMatch(password); // password should have one small case, one upper case, one number and one symbol
    bool isConfirmPasswordMatched = password == confirmPassword; // confirm password should match with the above password

    return isValidUser &&
        isUserNameValid &&
        isValidPassword &&
        isConfirmPasswordMatched; // true if all the conditions are true, else false
  }
}

UI

We are going to use 3 Textfield widgets for Username, Password & Confirm Password and BlocBuilder widget which has RaisedButton as a child.

BlocBuilder is a widget available in flutter_bloc package, which rebuilds on each state transitions.

We will listen each of the text changed and adds an event to bloc, Bloc in turns emits the necessary state which will be listened by bloc builder
So UI is now entirely isolated from our business logic, It just need to react for each state.

import 'package:bloc_tuto/registration/bloc/registration_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class RegistrationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bloc pattern'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            buildTextField(
                'UserName',
                false,
                (val) =>
                    context.bloc<RegistrationBloc>().add(UserNameChanged(val))),
            buildTextField(
                'Password',
                true,
                (val) =>
                    context.bloc<RegistrationBloc>().add(PasswordChanged(val))),
            buildTextField(
                'Confirm Password',
                true,
                (val) => context
                    .bloc<RegistrationBloc>()
                    .add(ConfirmPasswordChanged(val))),
            BlocBuilder<RegistrationBloc, RegistrationState>(
              condition: (oldState, newState) =>
                  oldState.model.isValidForRegistration !=
                  newState.model.isValidForRegistration, // re-build only when isValid changed from oldstate.
              builder: (context, state) {
                return RaisedButton(
                  onPressed: state != null && state.model.isValidForRegistration
                      ? () {} // enable press call only when model is valid for registration
                      : null,
                  child: Text('Register'),
                );
              },
            )
          ],
        ),
      ),
    );
  }

  TextField buildTextField(
      String hintText, bool isObscure, ValueChanged<String> onChangedCallback) {
    return TextField(
      obscureText: isObscure,
      decoration: InputDecoration(hintText: hintText),
      onChanged: onChangedCallback,
    );
  }
}

As our business logic & UI was isolated each other, we can test each of them individually without affecting other.

Full Sample along with test cases see GitHub 😇😇

Happy fluttering!! 🤩🤩

HTTP 🤩🤩 !!!! Flutter

Prakash S — Fri, 08 May 2020 03:50:47 +0000

Flutter is meant to create UI/Client oriented stack, but without a backend we cannot deliver a full fledged business functionality to the user.

In this post we are going to see how we can consume the http services.

Let see in action 😇
Our first step would be add the package HTTP to pubspec.yaml file

We are going to see the Four major methods of HTTP (GET, PUT, POST, DELETE) using the open API JsonPlaceholder.

Package ❤️🥰 http ❤️🥰 does all the things for us, we just need to use it as rest client like PostMan

Get🧐

import 'dart:convert';
import 'package:http/http.dart';
import 'models/post.dart';

Future<List<Post>> getPosts() async {
    Client client = Client();
    try {
      var response =
          await client.get('https://jsonplaceholder.typicode.com/posts');
      List posts = jsonDecode(response.body);
      return posts.map((post) => Post.fromJson(post)).toList();
    } finally {
      client.close();
    }
  }

POST😮

Future<Post> newPost(Post editedPost) async {
    Client client = Client();
    try {
      String url = 'https://jsonplaceholder.typicode.com/posts/';
      var body = jsonEncode(editedPost.toJson());
      var response = await client.post(
        url,
        body: body,
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
      );
      var post = jsonDecode(response.body);
      return Post.fromJson(post);
    } finally {
      client.close();
    }
  }

PUT🙄

Future<Post> editPost(Post editedPost) async {
    Client client = Client();
    try {
      String url = 'https://jsonplaceholder.typicode.com/posts/${editedPost.id}';
      var body = jsonEncode(editedPost.toJson());
      var response = await client.put(
        url,
        body: body,
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
      );
      var post = jsonDecode(response.body);
      return Post.fromJson(post);
    } finally {
      client.close();
    }
  }

DELETE🥺

Future deletePost(int id) async {
    Client client = Client();
    try {
      String url = 'https://jsonplaceholder.typicode.com/posts/${id}';
      await client.delete(url);
      print('post deleted succesfully');
    } finally {
      client.close();
    }
  }

for full sample GitHubRepo

Happy Fluttering 😇😇

JSON ❤️ Flutter

Prakash S — Sat, 02 May 2020 04:07:22 +0000

Now a days in the REST world, JSON is very much important and it transfers between client and server.

JSON (JavaScript Object Notation) is a lightweight data-interchange format

Ok, How do we serialize and deserialize JSON in flutter ??? 🤔🤔

As from my knowledge we can do it three ways 😇
1) Manual
2) Json2Dart using websites
3) Auto Generation

Consider the following model class

class ManualPost {
  int userId;
  int id;
  String title;
  String body;
}

Manual

Convert class to JSON

methods toJson & jsonEncode would help us here.

Map<String, dynamic> toJson() =>
      {'userId': userId, 'id': id, 'title': title, 'body': body};
var post = ManualPost();
post.id = 1;
post.userId = 1;
post.title = "Title";
post.body = "Body";
print(jsonEncode(post));

The above will print like this
{"userId":1,"id":1,"title":"Title","body":"Body"}

Now will see the reverse

JsonString to Class

jsonDecode will help us to get the Map from the json string

With the Map result we can create the instance of our model in two steps
1) Create a constructor with properties
2) Create instance using static funtion fromJson

ManualPost({this.userId, this.id, this.title, this.body});

ManualPost.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        userId = json['userId'],
        title = json['title'],
        body = json['body'];

Json2Dart using websites

There are lot's of website which does the above manual stuff's
one of the website which i used is JsonToDart

AutoGeneration

Thanks to the packages json_serializable, build_runner & json_annotation
These will help us to generate the fromJson & toJson for the model classes.

Let us see in action.!!!!

Add the json_annotation as dependency in pubspec yaml file
Similarly add json_serializable & build_runner as dev dependency in pubspec yaml file.

dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^3.0.1
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.9.0
  json_serializable: ^3.3.0

We are only two steps ahead to generate fromJson & toJson
1) Annotate the class using @JsonSerializable() & attributes using @JsonKey(name:'key')

@JsonSerializable()
class AutoGenPost {
  @JsonKey(name: 'userId')
  int userId;
  @JsonKey(name: 'id')
  int postId;
  @JsonKey(name: 'title')
  String title;
  @JsonKey(name: 'body')
  String body;

2) Run the command flutter pub run build_runner build in your favorite terminal

This will do the magic to create a file like 'filename.g.dart'.

part of 'auto_gen_post.dart';

AutoGenPost _$AutoGenPostFromJson(Map<String, dynamic> json) {
  return AutoGenPost()
    ..userId = json['userId'] as int
    ..postId = json['id'] as int
    ..title = json['title'] as String
    ..body = json['body'] as String;
}

Map<String, dynamic> _$AutoGenPostToJson(AutoGenPost instance) =>
    <String, dynamic>{
      'userId': instance.userId,
      'id': instance.postId,
      'title': instance.title,
      'body': instance.body,
    };

Now we can refer this file in our model and we can call from & to Json of the generated methods.

part 'filename.g.dart';
factory Class.fromJson(Map<String, dynamic> json) => _$ClassFromJson(json);
Map<String, dynamic> toJson() => _$ClassToJson(this);

That's it... we now able to do the serialization and deserialization in flutter 🥰🥰

Some of us might come from C# or Java world, where we have used runtime serialization and de-serialization using generics and reflection. Whereas in flutter we don't have such functionality as of today, due to some limitations. 😫😫

Check out the official documentation for more info
Flutter Docs

for full sample
Github Repo

Happy fluttering😇😇

Google Sign-In ❤️ Flutter ❤️ Firebase

Prakash S — Thu, 23 Apr 2020 07:38:06 +0000

Liquid syntax error: 'raw' tag was never closed

Pro Flutter Navigation

Prakash S — Tue, 21 Apr 2020 03:09:21 +0000

Navigation from one page to other is vital part in mobile app development.
Flutter comes with very easy solutions for navigation using 🥰Navigator🥰 class.

In this post I am going to cover two types of navigation in flutter.

1) Simple navigation
2) Named navigation

Our scenario is to move to the second page on button pressed, we were taking two pages
1) Home page
2) Second page

also we are passing a string to second page.

Simple navigation

Simple navigation can be achieved by using Navigator push method

the syntax for Navigator push is
'Navigator.push(context, MaterialPageRoute(builder: (context) => Widget()));'

Seems simple isnt it, See below for code snippet.

Named navigation

I would say this is the best way to handle navigation, you will find the answer soooon 😉

Named navigation is using routing concept, now you get it why it is the best way ahhh 😇

All the navigation routes are isolated/dedicated in one place, so we don't need to worry about instantiating class in our dart code.

lets jump into the code.

Flutter Material app comes with function callback for generating the App routes

onGenerateRoute

We can define our routes in a function and set it to onGenerateRoute, so that flutter knows where to go on navigation.

Syntax for named routing using navigator:
Navigator.of(context).pushNamed('/route', arguments: args);

even simple isn't it??

See below code snippet

for full sample please find in the Github repo link

Happy fluterring 😇😇!!

Providers and Stateless widget

Prakash S — Thu, 09 Apr 2020 13:34:47 +0000

As we all know Stateless widget won't change for any state changes. But There is some technique that we can use to update the stateless widgets..

With the help of Streams we can do it easily. But unwiring streams in Stateless widget is hell!!!😡😡

Thanks to the package 'Provider'

Yes, Using provider we can update the Stateless widget UI also we can dispose the streams and other disposable objects.

Provider is really helpful to start to do 'Separation of concerns' in flutter.

We can isolate our business logics & UI, which makes our app easily testable and reusable

Lets stop here and jump into the code

Add the provider package in 'pubspec.yaml'

Let us create a stateless widget which has Text, TextField, RaisedButton and a Container

Our idea is simple that when any text changes in TextField my Text widget should reflect the change, similarly whenever we press the Button the Container color should change.

In this post, I am going to do it in two ways
1) ChangeNotifierProvider
2) Provider & Streams

Folder Structure

ChangeNotifierProvider

The name tells what we are going to do. Yes we are going to notify the changes and reacts to those changes.

We have a base model 'MyModelBase' which has 'myText' & 'isValid' property
Now we have our Notify model 'MyNotifierModel' which inherits from our base model also with a mixin called 'ChangeNotifier'

We are now going to override our setter of myText & isValid and invoking 'notifylistener' method. After this our model will look like the below.

Now our model is ready to notify the changes!!! Hurray!!!
But how this changes are going to affect our widget 😞

Thanks to 'ChangeNotifierProvider' & 'Consumer' widget 😇

ChangeNotifierProvider has
1) 'create' method by which we are initiating our model
2) 'child' property by which we are adding our UI.

Here we are using 'Consumer' widget as child to listen the notification from our model.

Once the notifylistener called in the model our Consumer will trigger to rebuild.
As Consumer widget provides the model as param which has the updated value, we can simply bind to the corresponding UI.

Now you may notice that the action of RaisedButton and TextField are independent, means both actions are impacting different elements like TextField impacts the Text widget and RaisedButton impacts the Container.

But the Consumer widgets rebuilding all the four elements instead for the corresponding changes. Yes, notifylistener is called for full model not for the properties.

Lets see how Provider & Streams can solve this problem.

Provider & Streams

We are going to have a model called 'MySimpleModel' which inherits from BaseModel, So we override the setText & setIsValid.
Along with this, we are going to have StreamController for text and boolean.
Of course we are closing the stream in a dispose method.

Our model will look like as below

Now, we are going to use the Provider which has
1) 'create' - used to instantiate our model
2) 'dispose' - clears any reference for the model

While constructing Text & Container widget, we are wrapping those into a 'StreamBuilder' and takes the text and boolean stream correspondingly

As we are adding the changes to the stream controller in our model, our stream builder re-build the UI as per the corresponding stream

More importantly we are 'disposing/closing' our stream with the help of Provider's dispose callback

How sweet it is 😊😊

UI Widget will look like:

for full sample please find in the Github repo link

Happy fluterring 😇😇!!

Stateful vs Stateless flutter widget

Prakash S — Tue, 07 Apr 2020 14:16:15 +0000

Stateful widget is that which maintains State and responds/rebuilds (itself) when there are any changes in the state.
Where as Stateless widget does not have a state. It is static and cannot rebuild.

In simple words - Stateful widgets are mutable & Stateless widgets are immutable

lets go through some code

We are going to have 'Text' widget and 'TextField' widget to see the difference between Stateful and Stateless widget.

The above snippet is the syntax/signature for the stateless widget.
It has 'class' which 'extends StatelessWidget'

'build' override method is responsible to draw the UI.

We are having a field called 'textValue' which was given to 'Text' widget and the same field was changed by handing 'onChanged' in 'TextField' widget.
But the changes in TextField was not reflecting in the Text widget. Means the state of 'textValue' is immutable

Let us take the same scenario in Stateful widget.

The above snippet is the syntax/signature for the stateful widget.
It has 'class' which 'extends StatefulWidget'

Stateful widget will overrides a createState to get the state for the widget.
Now it is State's responsibility to update the UI. Yes you guessed it.
build method will be available in State & not in the widget itself.

This time everything is same but with a little change in onChanged text field callback, Yes the 'setState' does the trick here.

whenever the setState called, the build method will be triggered to re-draw or re-build

Yes !! now you got the difference between Stateful and Stateless widget in flutter

Github project link

Happy coding 😇😇 !!