Google search engine
Home Blog Page 51

Dropdown In Flutter

Shaiq Khan
-
0
Dropdown In Flutter

In this article, We will explain about The dropdown button in a flutter. A dropdown button is a material design button. So let’s apply a demo of the dropdown button in your flutter applications.

Table of Contents :

Flutter

Dropdown Button

Code Implementation

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single code base in record time ”

Dropdown Button:

We use the Dropdown Button to display any Dropdown List item as we can change its style according to it. Such as its background color, border secular etc. As this Dropdown list because it is a clickable widget. Which shows the list item we have selected. The Dropdown Button has DropDownMenuItem. We initialize whatever is to be shown in the list. and the Dropdown button has a function named onChnaged. When a user clicks on an item from the dropdown. So it triggers and executes the triggered function.

Demo Module :

Code Implement :

Create a new dart file calledflutter_dropdown_button_demo inside the lib folder.

Have a Look at the code Implementation :

DropdownButton<String>(
  focusColor:Colors.white,
  value: _chosenValue,
  //elevation: 5,
  style: TextStyle(color: Colors.white),
  iconEnabledColor:Colors.black,
  items: <String>[
    'Android',
    'IOS',
    'Flutter',
    'Node',
    'Java',
    'Python',
    'PHP',
  ].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value,style:TextStyle(color:Colors.black),),
    );
  }).toList(),
  hint:Text(
    "Please choose a langauage",
    style: TextStyle(
        color: Colors.black,
        fontSize: 14,
        fontWeight: FontWeight.w500),
  ),
  onChanged: (String value) {
    setState(() {
      _chosenValue = value;
    });
  },
),

We have explained the Dropdown in this screen. We list items using the Dropdown Button. To show on the click of a button, in the Dropdown Button we have initialized some list items. Which is of string type. That will show us the item.

Seeing the screen above. There is a list showing in this screen, which will initialize the value of the DropdownMenuItemin the Dropdown Button and will show the click value on the click of its item in onChanged.

Code File :

import 'package:flutter/material.dart';

class DropDownDemo extends StatefulWidget {
  @override
  _DropDownDemoState createState() => _DropDownDemoState();
}

class _DropDownDemoState extends State<DropDownDemo> {
  String _chosenValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DropDown'),
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(0.0),
          child: DropdownButton<String>(
            value: _chosenValue,
            //elevation: 5,
            style: TextStyle(color: Colors.black),

            items: <String>[
              'Android',
              'IOS',
              'Flutter',
              'Node',
              'Java',
              'Python',
              'PHP',
            ].map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            hint: Text(
              "Please choose a langauage",
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 16,
                  fontWeight: FontWeight.w600),
            ),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

Conclusion :

In this article, I have explained a Dropdown Button demo, you can modify and experiment according to your own, this little introduction was from the Dropdown Button from our side.

I hope this blog helps will provide you with sufficient information in Trying up the Dropdown Button demo in your flutter project. So please try it.

❤ ❤ Thanks for reading this article ❤❤

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

2026 Ultimate Firebase Authentication Guide with Provider in F…

Shaiq Khan
-
0
2026 Ultimate Firebase Authentication Guide with Provider in F…

Things that you may likely learn from the Blog :

  • How to implement authentication into your flutter app?
  • How to use the provider package for state management?
  • How to use git_it package to inject dependencies?
  • How to implement routes for navigation?

Introduction To Provider

Provider is not a state management, it is just a state management helper. Provider package provides us various widgets that help us to consume various changes in values and then rebuild the widget when any changes occur. The most frequently used classes of provider package are Consumer, ChangeNotifier, ChangeNotifierProvider. The model class that is made available to the app widget tree, extends the ChangeNotifier. This class contains all the app state managing methods and variables and objects. Whenever we update the state of the app we need to call notifiyListeners() to notify all the widgets who are listening to that particular change so that the UI can be rebuilt and updated. ChangeNotifierProvider is wrapped at the top of the app widget so that all the widget of the app widget tree can listen to the change made. There are two methods that can be used to consume the updated data. Using Provider.of() and Consumer widget.

Install the bellow packages inside your pubspec.yaml file

provider | Flutter Package
English | Português A wrapper around InheritedWidget to make them easier to use and more reusable. By using provider…pub.dev

get_it | Dart Package
This is a simple Service Locator for Dart and Flutter projects with some additional goodies highly inspired by Splat…pub.dev

firebase_auth | Flutter Package
A Flutter plugin to use the Firebase Authentication API. To learn more about Firebase Auth, please visit the Firebase…pub.dev

firebase_core | Flutter Package
A Flutter plugin to use the Firebase Core API, which enables connecting to multiple Firebase apps. To learn more about…pub.dev

Let’s learn how to use routes for navigation

MaterialApp provides us onGenerateRoute, initialRoute functionality to implement navigation using routes. onGenerateRoute takes RouteSetting as a parameter and returns a Route.

Let’s create a separate class to initialize all the navigation cases using the switch method. We will make a static Route<dynamic> type method that takes RouteSettings parameters.

routers.dart file

import 'package:flutter/material.dart';
import 'package:flutter_chat_app/ui/homePage.dart';
import 'package:flutter_chat_app/ui/landingPage.dart';

class Routers {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case 'home':
        return MaterialPageRoute(builder: (_) => HomePage());
      case 'landing':
        return MaterialPageRoute(builder: (_) => LandingPage());
      default:
        return MaterialPageRoute(builder: (_) {
          return Scaffold(
            body: Center(
              child: Text('No route defined for ${settings.name}'),
            ),
          );
        });
    }
  }
}

Now we can provide the onGenerateRoute property also initialize the initalRoute .

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: 'landing',
      onGenerateRoute: Routers.generateRoute,
    );
  }
}

For navigation, we can use pushNamed method to navigate to another screen using the name of the route name defined in the router.dart .

onPressed: () async {
      Navigator.pushNamed(context, 'route_name');
  }

Let’s code

To manage the state of the app we will use enums ViewState, AuthState .

enum ViewState { Ideal, Busy }
enum AuthState { SignIn, SignUp }

Let’s build a BaseModel class that extends ChangeNotifier . This class will contain all the methods that we will use the update the UI.

import 'package:flutter/material.dart';
import 'package:flutter_chat_app/enum/appState.dart';

class BaseModel extends ChangeNotifier {
  ViewState _viewState;

  ViewState get viewState => _viewState;

  setViewState(ViewState viewState) {
    _viewState = viewState;
    notifyListeners();
  }

  AuthState _authState;

  AuthState get authState => _authState;

  setAuthState(AuthState authState) {
    _authState = authState;
    notifyListeners();
  }
}

Here we have created two methods to change the state. setViewState method is used to switch the ViewState from Idel to Busy and vice-versa. setAuthState method is used to switch theAuthState from SignInto SignUpand vice-versa.

Now create a AuthModel class that extends BaseModel . This class will contain all the auth methods.

authModel.dart file

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_chat_app/enum/appState.dart';

import 'baseModel.dart';

class AuthModel extends BaseModel {
  FirebaseAuth firebaseAuth = FirebaseAuth.instance;

  void createNewUser(String email, String password) async {
    setViewState(ViewState.Busy);
    await firebaseAuth.createUserWithEmailAndPassword(
        email: email, password: password);
    setViewState(ViewState.Ideal);
  }

  void signIn(String email, String password) async {
    setViewState(ViewState.Busy);
    await firebaseAuth.signInWithEmailAndPassword(
        email: email, password: password);
    setViewState(ViewState.Ideal);
  }

  void logOut() async {
    setViewState(ViewState.Busy);
    await firebaseAuth.signOut();
    setViewState(ViewState.Ideal);
  }
}

The above class will be used to provide the various methods that will handle the authentication of our app. Now we will make all the methods that will be used to handle all the UI changes when the user will switch between the sign-in and sign-up option.

authStateModel.dart file

import 'package:flutter/cupertino.dart';
import 'package:flutter_chat_app/enum/appState.dart';
import 'package:flutter_chat_app/model/authModel.dart';
import 'package:flutter_chat_app/model/baseModel.dart';

class AuthStateModel extends BaseModel {
  switchAuthenticationState(AuthModel authModel) {
    authModel.authState == AuthState.SignIn
        ? authModel.setAuthState(AuthState.SignUp)
        : authModel.setAuthState(AuthState.SignIn);
  }

  switchAuthenticationMethod(
    AuthModel authModel,
    TextEditingController emailController,
    TextEditingController passwordController,
  ) {
    authModel.authState == AuthState.SignIn
        ? authModel.signIn(
            emailController.text,
            passwordController.text,
          )
        : authModel.createNewUser(
            emailController.text,
            passwordController.text,
          );
  }

  switchAuthenticationText(AuthModel authModel) {
    return authModel.authState == AuthState.SignIn ? "Sign In" : "Sign Up";
  }

  switchAuthenticationOption(AuthModel authModel) {
    return authModel.authState == AuthState.SignIn
        ? "Create account ??"
        : "Already registered ??";
  }
}

Till here we have made all the required methods that will be used to update the UI of different screens. Now we will create a BaseView class that is used to update the UI, pass the model data that we have made earlier.

BaseView takes a builder function that takes BuildContext, Model, and a Widget as a parameter.

BaseView widget can only be used for the model class that extends BaseModel.

baseView.dart file

import 'package:flutter/material.dart';
import 'package:flutter_chat_app/locator.dart';
import 'package:flutter_chat_app/model/baseModel.dart';
import 'package:provider/provider.dart';

class BaseView<T extends BaseModel> extends StatefulWidget {
  final Widget Function(BuildContext context, T model, Widget child) builder;

  BaseView({
    @required this.builder,
  });

  @override
  _BaseViewState<T> createState() => _BaseViewState<T>();
}

class _BaseViewState<T extends BaseModel> extends State<BaseView<T>> {
  T model = locator<T>();

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<T>.value(
      //builder: (context) => model,
      child: Consumer<T>(builder: widget.builder),
      //notifier: model,
      value: model,
    );
  }
}

Let’s build the app UI

landingPage.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_chat_app/model/authModel.dart';
import 'package:flutter_chat_app/ui/authPage.dart';

import 'package:flutter_chat_app/ui/baseView.dart';
import 'package:flutter_chat_app/ui/homePage.dart';

// ignore: must_be_immutable
class LandingPage extends StatelessWidget {
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return BaseView<AuthModel>(
      builder: (context, authModel, child) => StreamBuilder(
          stream: FirebaseAuth.instance.authStateChanges(),
          builder: (context, snapshot) {
            return snapshot.hasData
                ? HomePage()
                : AuthPage(
                    emailController: emailController,
                    passwordController: passwordController,
                    authModel: authModel,
                  );
          }),
    );
  }
}

authPage.dart file

import 'package:flutter/material.dart';
import 'package:flutter_chat_app/enum/appState.dart';
import 'package:flutter_chat_app/model/authModel.dart';
import 'package:flutter_chat_app/model/authStateModel.dart';
import 'package:flutter_chat_app/ui/baseView.dart';

class AuthPage extends StatelessWidget {
  final TextEditingController emailController;
  final TextEditingController passwordController;
  final AuthModel authModel;

  AuthPage({
    @required this.emailController,
    @required this.passwordController,
    @required this.authModel,
  });

  @override
  Widget build(BuildContext context) {
    return BaseView<AuthStateModel>(builder: (context, authStateModel, __) {
      return Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Center(
            child: Column(
              children: [
                SizedBox(
                  height: 200,
                ),
                TextFormField(
                  decoration: InputDecoration(hintText: "Email"),
                  controller: emailController,
                ),
                TextFormField(
                  controller: passwordController,
                  decoration: InputDecoration(hintText: "Password"),
                ),
                authModel.viewState == ViewState.Busy
                    ? CircularProgressIndicator()
                    : RaisedButton(
                        child: Text(
                            authStateModel.switchAuthenticationText(authModel)),
                        color: Colors.cyanAccent,
                        onPressed: () {
                          authStateModel.switchAuthenticationMethod(
                              authModel, emailController, passwordController);
                        }),
                InkWell(
                  onTap: () {
                    authStateModel.switchAuthenticationState(authModel);
                  },
                  child:
                      Text(authStateModel.switchAuthenticationOption(authModel)),
                ),
              ],
            ),
          ),
        ),
      );
    });
  }
}

homePage.dart file

import 'package:flutter/material.dart';
import 'package:flutter_chat_app/model/authModel.dart';
import 'package:flutter_chat_app/ui/baseView.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BaseView<AuthModel>(
      builder: (context, model, __) => Scaffold(
        body: Center(
          child: RaisedButton(
            color: Colors.cyanAccent,
            child: Text("Log Out"),
            onPressed: () {
              model.logOut();
            },
          ),
        ),
      ),
    );
  }
}

Register all the services with the locator

locator.dart file

import 'package:flutter_chat_app/model/authModel.dart';
import 'package:flutter_chat_app/model/authStateModel.dart';
import 'package:flutter_chat_app/model/baseModel.dart';
import 'package:get_it/get_it.dart';


final locator = GetIt.instance;

void setupLocator(){
  locator.registerLazySingleton(() => BaseModel());
  locator.registerLazySingleton(() => AuthModel());
  locator.registerLazySingleton(() => AuthStateModel());
}

Initialize the setupLocator() method inside your main function

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  setupLocator();
  runApp(MyApp());
}

GitHub Link

flutter-devs/flutter_auth_provider
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Related: Maintain Activity Log in Firebase Using FlutterFlow

GridView List Widget In Flutter

Shaiq Khan
-
0
GridView List Widget In Flutter

In this blog, I will talk about the GridView List widget in a flutter by implementing a demo of the GridView List widget in your flutter applications. Now let’s start.

Table of Contents :

Flutter

GridView List widget

Code Implementation

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single code base in record time ”

GridView List widget:

GridView Flutter has a widget that. Which displays the item in 2D. As its name suggests. We then use it. When we have to show the grid’s form items. We can tap on them. And go to another page. In this, we can take image text icon etc. as per our requirement.GridView widget is also considered to be scrollable. Because it is scrollable. To see an example of a grid view, we have many such apps like an e-commerce app such as snapdeal, etc. in which an example will be found.

GridView widget individually it has four more options.

  1. GridView.count
  2. GridView.builder
  3. GridView.custom
  4. GridView.extent

First of all, the following property is important to understand when we implement the grid view widget.

  • scrollDirection: Axis.Vertical or Axis.Horizontal. We can change the direction vertical and horizontal.
  • physics: We use scrolling to scroll the item. The utility scrolls from the list end of the list to the beginning.
  • shrinkWrap: If shrinkwrap is false then the item takes up more space to scroll. which is not good, This causes memory loss. And reduce the performance app. So we set it to avoid memory leakage while scrolling.
  • padding: It is used to specify the space around the whole list of widgets..
  • crossAxisSpacing: The crossAxisSpacing use to specify the number of pixels between widgets to all the children listed in the cross axis.
  • crossAxisCount: It is used to specify the number of columns in a grid view.
  • mainAxisSpacing: The crossAxisSpacing use to specify the number of pixels between widgets to all the children listed in the main axis.

Demo Module :

Code Implement :

GridView.count:

GridView.count is the most commonly used grid layout. Because we already know the size of the grid. The GridView count has a required end, known as the crossAxisCount.The essential property in the GridView is taken in the grid SliverGridDelegateWithFixedCrossAxis It is known in the same way as the crossAxisCount.This is obviously the most common.

Let us understand this with the help of a reference.

GridView.count(
  crossAxisCount: 2,
  childAspectRatio: (2 / 1),
  crossAxisSpacing: 5,
  mainAxisSpacing: 5,
  //physics:BouncingScrollPhysics(),
  padding: EdgeInsets.all(10.0),
  children: items
      .map(
        (data) => GestureDetector(
            onTap: () {
              Navigator.of(context).pushNamed(RouteName.GridViewBuilder);
            },
            child: Container(
              padding: const EdgeInsets.all(16),

              //  margin:EdgeInsets.symmetric(vertical: 5, horizontal: 5),
              //color:data.color,
              color: RandomColorModel().getColor(),
              child: Column(
                children: [
                  Icon(
                    data.icon,
                    size: 25,
                    color: Colors.black,
                  ),
                  Text(data.title,
                      style: TextStyle(fontSize: 18, color: Colors.black),
                      textAlign: TextAlign.center)
                ],
              ),
            )),
      )
      .toList(),
),
-----------------------------------------------------------
class RandomColorModel {
  Random random = Random();
  Color getColor() {
    return Color.fromARGB(random.nextInt(300), random.nextInt(300),
        random.nextInt(300), random.nextInt(300));
  }
}

GridView.builder:

We use the GridView.builder when we want to make a big item grid list with a large number of children you can displays data dynamically or data on demand can be shown. Then we can use GridView.builder.

The following are 3 common features of GridViewbuilder.

  1. itemCount: The itemCount is used to define the amount of list item data.
  2. gridDelegate: The gridDelegate determines the divider. Its argument must not be null.
  3. itemBuilder (BuildContext context, int index): The gridViewBuider we use is used to create the item that is displayed on the grid view.

Let us understand this with the help of a reference.

GridView.builder(
  itemCount:items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: MediaQuery.of(context).orientation ==
          Orientation.landscape ? 3: 2,
      crossAxisSpacing: 8,
      mainAxisSpacing: 8,
    childAspectRatio: (2 / 1),
  ),
  itemBuilder: (context,index,) {
    return GestureDetector(
      onTap:(){
        Navigator.of(context).pushNamed(RouteName.GridViewCustom);
      },
      child:Container(
       color: RandomColorModel().getColor(),
       child: Column(
          mainAxisAlignment:MainAxisAlignment.spaceEvenly,
          children: [
            Icon(items[index].icon),
            Text(items[index].title,style: TextStyle(fontSize: 18, color: Colors.black),
                textAlign: TextAlign.center),
          ],
        ),
      ),
    );
  },
)
-----------------------------------------------------------
class RandomColorModel {
  Random random = Random();
  Color getColor() {
    return Color.fromARGB(random.nextInt(300), random.nextInt(300),
        random.nextInt(300), random.nextInt(300));
  }
}

GridView.custom :

Grid view is custom. It creates its own custom grid view. All property is the same. It has two essential assets. Which need to be defined using GridDevigate, GridDelegate, and ChildDelegate. Let us discuss Childelgate. Childelgate takes it in two different types of slivers.

  1. SliverChildListDelegate.
  2. SliverChildBuilderDelegate.

This is another way to show both the data or the length of the data. SliverChildListDelegate in which the specified number can specify the number of children. In SliverChildBuilderDelegate we can display many items.

Let us understand this with the help of an reference.

GridView.custom(
    padding: EdgeInsets.all(10.0),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: (2 / 1),
        crossAxisSpacing: 5,
        mainAxisSpacing: 5,
        ),
    childrenDelegate: SliverChildListDelegate(

      items.map((data) =>
          GestureDetector(
              onTap: (){
                Navigator.of(context).pushNamed(RouteName.GridViewExtent);
              },
              child: Container(
                padding: const EdgeInsets.all(16),
                color: RandomColorModel().getColor(),
                child: Column(
                  children: [
                    Icon(data.icon),
                    Text(data.title,
                        style: TextStyle(fontSize: 22, color: Colors.white),
                        textAlign: TextAlign.center)
                  ],
                ),
              )),

      ).toList(),
    )),
-----------------------------------------------------------
class RandomColorModel {
  Random random = Random();
  Color getColor() {
    return Color.fromARGB(random.nextInt(300), random.nextInt(300),
        random.nextInt(300), random.nextInt(300));
  }
}

GridView.extent:

GridView Extent property is used when we want to create a grid with custom extent values. It means each tile has a maximum cross-axis extent.

Let us understand this with the help of a reference.

GridView.extent(
  childAspectRatio: (2 / 2),
  crossAxisSpacing: 4,
  mainAxisSpacing: 4,
  padding: EdgeInsets.all(10.0),
  maxCrossAxisExtent: 200.0,
  children: List.generate(50, (index) {
    return Container(
      padding: EdgeInsets.all(20.0),
      child: Center(
        child: GridTile(
          footer: Text(
            'Item $index',
            textAlign: TextAlign.center,
            style:TextStyle(color:Colors.white,fontSize:15,fontWeight:FontWeight.bold),
          ),

          child: Icon(Icons.access_alarm,
              size: 40.0, color: Colors.white),
        ),
      ),
      color: RandomColorModel().getColor(),
      margin: EdgeInsets.all(1.0),
    );
  }),
),
-----------------------------------------------------------
class RandomColorModel {
  Random random = Random();
  Color getColor() {
    return Color.fromARGB(random.nextInt(300), random.nextInt(300),
        random.nextInt(300), random.nextInt(300));
  }
}

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_gridview_demo/model/color_model.dart';
import 'package:flutter_gridview_demo/model/grid_items_model.dart';
import 'package:flutter_gridview_demo/route_names.dart';
class GridViewDemo extends StatefulWidget {
  @override
  _GridViewDemoState createState() => _GridViewDemoState();
}

class _GridViewDemoState extends State<GridViewDemo> {


  List<GridListItems> items = [
    GridListItems(color:Colors.green,title: 'Bicycle', icon: Icons.directions_bike),
    GridListItems(color:Colors.pink[300],title:'Boat', icon: Icons.directions_boat),
    GridListItems(color:Colors.pink[300],title: 'Bus', icon: Icons.directions_bus),
    GridListItems(color:Colors.pink[300],title: 'Train', icon: Icons.directions_railway),
    GridListItems(color:Colors.pink[300],title: 'Walk', icon: Icons.directions_walk),
    GridListItems(color:Colors.pink[300],title: 'Contact', icon: Icons.contact_mail),
    GridListItems(color:Colors.green,title: 'Bicycle', icon: Icons.directions_bike),
    GridListItems(color:Colors.pink[300],title:'Boat', icon: Icons.directions_boat),
    GridListItems(color:Colors.pink[300],title: 'Bus', icon: Icons.directions_bus),
    GridListItems(color:Colors.pink[300],title: 'Train', icon: Icons.directions_railway),
    GridListItems(color:Colors.pink[300],title: 'Walk', icon: Icons.directions_walk),
    GridListItems(color:Colors.pink[300],title: 'Contact', icon: Icons.contact_mail),
    GridListItems(color:Colors.green,title: 'Bicycle', icon: Icons.directions_bike),
    GridListItems(color:Colors.pink[300],title:'Boat', icon: Icons.directions_boat),
    GridListItems(color:Colors.pink[300],title: 'Bus', icon: Icons.directions_bus),
    GridListItems(color:Colors.pink[300],title: 'Train', icon: Icons.directions_railway),
    GridListItems(color:Colors.pink[300],title: 'Walk', icon: Icons.directions_walk),
    GridListItems(color:Colors.pink[300],title: 'Contact', icon: Icons.contact_mail),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: (2 / 1),
        crossAxisSpacing: 5,
        mainAxisSpacing: 5,
        //physics:BouncingScrollPhysics(),
        padding: EdgeInsets.all(10.0),
        children: items.map((data) =>

            GestureDetector(
                onTap: (){
                  Navigator.of(context).pushNamed(RouteName.GridViewBuilder);
                  },
                child: Container(
                  padding: const EdgeInsets.all(16),

                //  margin:EdgeInsets.symmetric(vertical: 5, horizontal: 5),
                  //color:data.color,
                  color: RandomColorModel().getColor(),
                  child: Column(
                      children: [
                        Icon(data.icon,size:25,color:Colors.black,),
                        Text(data.title,
                            style: TextStyle(fontSize: 18, color: Colors.black),
                            textAlign: TextAlign.center)
                      ],
                    ),
                   )),

        ).toList(),
      ),
    );
  }
}

Conclusion :

In this article, I have explained a GridView List widget demo, you can modify and experiment according to your own, this little introduction was from the GridView List widget from our side.

I hope this blog helps will provide you with sufficient information in Trying up the GridView List widget in your flutter project. In this demo explain the GridView List widget in flutter. So please try it.

❤ ❤ Thanks for reading this article ❤❤

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

Navigate with Named Routes in Flutter

Shaiq Khan
-
0
Navigate with Named Routes in Flutter

Introduction :

Named Routes is the simplest way to navigate to the different screens using naming concepts. When a user needs multiple screens in an app depending on its need then we have to navigate from one screen to another and also return back many times back on the previous screen then it becomes a very hectic task, there we use a naming concept so as to remember screens with its name provided by the user and then we can directly access that route or page directly through Navigator.pushNamed() method.

Table of contents:

:: Create two routes(screen)

:: Defining the routes with names

:: Navigate from one route to another using Navigator.pushNamed()

:: Using static modifier to navigate to another page.

Create two Routes

Here above the code, we have created two routes or screens.

Defining the routes with names :

Note: We cannot use home property and initialRoute property both inside this MaterialApp as they both contradict each other.

Navigate from one route to another :

We will navigate from one screen to another using Navigator.pushNamed() method.

Using static modifier to call naming routes :

If we use the routes method to navigate from one page to another with a naming concept then we have to remember the string that we have provided to its route. When there are multiple screens in an application then it becomes tough to remember each string. So we create one string datatype of it with the static modifier so that we can assign it by directly calling it through its class.

As you can see above we have used a static modifier with string datatypte to both our screen and assign it with the string variable.

Now we have to see how we will call these class in our routes::

As you can see now easily remember the routes by directly remembering its class name as shown above we have used Home.id and Second.id in place of using naming string routes and remembering each string name.

We can directly access it easily and can navigate from one page to another with the same name as provided above.

For more info visit down the link:

Navigate with named routes
In the Navigate to a new screen and back recipe, you learned how to navigate to a new screen by creating a new route…flutter.dev

Thanks for reading this article ❤

Clap 👏 If this article helps you.

Feel free to post any queries or corrections you think are required…✔

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Animated Align Widget in Flutter

Shaiq Khan
-
0
Animated Align Widget in Flutter

In this blog, we will explore the Animated Align Widget in a flutter. We will be using some core functions available in a flutter. We will implement a demo of the Animated Align Widget in your flutter applications. So let’s get started.

Table of Contents :

Flutter

Animated Align Widget

Demo Module

Code Implementation

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”.

Animated Align Widget:

The Animated Align Widget align that automatically positions the child’s position in a given period in a given alignment. And you can choose a period with a curve for the animation. And the widget will animate the alignment to the new target.

Let’s talk about some main constructors of the animated Align Widget. This widget has 3 properties. which do this work in our entire animation. As follows.

alignment(Alignment): where initially the child widget is placed.

curve(Curve): Easy curves are used to adjust the rate of changes in curve animation. This allows the speed to be slow and fast. there are some different-different types of options available.

duration(Duration): the Duration we can decide the time taken for a change of alignment according to ourselves.

Demo Module :

Code Implementation:

Create a new dart file calledanimated_align_demo inside the lib folder.

AnimatedAlign(
  alignment: _alignment,
  duration: Duration(seconds: 2),
  curve: Curves.easeInOutBack,
  child: SizedBox(
      width: 100.0,
      height: 100.0,
      child: Image.asset(
        'assets/images/pluginIcon.png',
        height: 40,
      )),
),

As I have understood above about the animated align widget. I have considered this as a demo in this screen. And a little code of this widget has been given above. As this screen has an image whose arrangement will go from Alignment.topRight to Alignment.bottomLeft. The duration time is also set as per our It has the option of the curve. There are many types of the curve. We have used the curves (Curves.easeInOutBack).

Code File :

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

import 'package:flutter/painting.dart';

class AnimatedAlignDemo extends StatefulWidget {
  @override
  _AnimatedAlignDemoState createState() => _AnimatedAlignDemoState();
}

class _AnimatedAlignDemoState extends State<AnimatedAlignDemo> {
  static const _alignments = [
    // Alignment.topLeft,
    Alignment.topRight,
    Alignment.bottomLeft,
    //   Alignment.bottomRight,
  ];

  var _index = 0;

  AlignmentGeometry get _alignment => _alignments[_index % _alignments.length];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.white,
        title: Text(
          'Animated Align',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.all(15),
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: <Widget>[
            AnimatedAlign(
              alignment: _alignment,
              duration: Duration(seconds: 2),
              curve: Curves.easeInOutBack,
              child: SizedBox(
                  width: 100.0,
                  height: 100.0,
                  child: Image.asset(
                    'assets/images/pluginIcon.png',
                    height: 40,
                  )),
            ),
            ButtonTheme(
              minWidth: 100,
              height: 50,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30),
              ),
              child: RaisedButton(
                color: Colors.purple.withOpacity(0.6),
                onPressed: () {
                  setState(() {
                    _index++;
                  });
                },
                child: Text(
                  'Click Me',
                  style: TextStyle(
                      fontFamily: 'Roboto Medium',
                      fontSize: 15.0,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.3,
                      color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion :

In this article, I have explained an Animated Align Widget demo, you can modify and experiment according to your own, this little introduction was from the Animated Align Widget our side.

I hope this blog will provide you with sufficient information in Trying up the Animated Align Widget in your flutter project. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Implementing Phone calls In Flutter apps

Shaiq Khan
-
0
Implementing Phone calls In Flutter apps

Flutter is really a fantastic tool to build mobile apps. Flutter is a free and open-source tool to develop mobile, desktop, web apps with a single code base. The technical architecture of flutter apps is a much easier, clean, and precise code structure. The community of flutter developer is constantly growing, helping us to provide a better experience and by developing various plugins. Plugins are great, help us to implement various functionality with lesser code and time.

The plugin page provides us an insight into the package quality. We must always prefer to use the package that has better maintenance, continuous improvement, good responses, and Flutter Favourite.

To implement the phone call functionality we need to use the bellow package:

url_launcher | Flutter Package
Flutter plugin for launching a URL on Android and iOS. Supports web, phone, SMS, and email schemes.pub.dev

flutter_phone_direct_caller | Flutter Package
A simple plugin to call a number directly from the app, without going to the phone dialer. Permission request is handled by…pub.dev

  • url_launcher package will be used to implement phone call using the default app of your mobile phone. This package will auto direct the phone to the default phone call making app and open the dialer screen to make the call.
  • flutter_phone_direct_caller package is not the best package but we will learn how to implement direct phone calls directly from our phone without the intermediate dialer.

Install the following dependencies inside your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^latest version
  flutter_phone_direct_caller: ^latest  version
  url_launcher: ^latest version

Making Phone Calls using the flutter_phone_direct_caller:plugin

To implement the phone call using this plugin is really very easy. This package provides us FlutterPhoneDirectCaller class that provides us callNumber() method that takes a phone number.

_callNumber(String phoneNumber) async {
  String number = phoneNumber;
  await FlutterPhoneDirectCaller.callNumber(number);
}

RaisedButton:

RaisedButton(
  child: Text("Call"),
  onPressed: () {
    _callNumber(textEditingController.text);
  },
)

Making Phone Calls using the url_launcher:plugin

This package provides us launch(URL) method that takes an URL with schema. Scheme is very essential as it directs the URL. In the case of phone calls, we use ‘tel:’ schema.

_launchPhoneURL(String phoneNumber) async {
  String url = 'tel:' + phoneNumber;
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

Here we have made a simple method that takes a String phoneNumber, this method will check whether the URL is correct or not if yes then the launch method will launch it else it will throw an error.

Pass this method inside the onPressed property of the above RaisedButton

RaisedButton(
  child: Text("Call"),
  onPressed: () {
    _launchPhoneURL(textEditingController.text);
  },
)

Full code:

import 'package:flutter/material.dart';
import 'package:flutter_phone_direct_caller/flutter_phone_direct_caller.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            child: TextFormField(
              keyboardType: TextInputType.phone,
              controller: textEditingController,
              onSaved: (phoneNumber) {
                textEditingController.text = phoneNumber;
              },
            ),
          ),
          RaisedButton(
            child: Text("_launchPhoneURL"),
            onPressed: () {
              _launchPhoneURL(textEditingController.text);
            },
          ),
          RaisedButton(
            child: Text("_callNumber"),
            onPressed: () {
              _callNumber(textEditingController.text);
            },
          )
        ],
      ),
    );
  }
}

_callNumber(String phoneNumber) async {
  String number = phoneNumber;
  await FlutterPhoneDirectCaller.callNumber(number);
}

_launchPhoneURL(String phoneNumber) async {
  String url = 'tel:' + phoneNumber;
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

Demo:

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Ignore Pointer Widget In Flutter

Shaiq Khan
-
0
Ignore Pointer Widget In Flutter

Today mobile users expect their apps should have a beautiful UI design, smooth animations, and great performance. To achieve this developer needs to create a new feature without compromising on quality and performance. That’s why Google build Flutter.

In this article, I’ll explain how to use the IgnorePointer widget in Flutter 

Table of Contents :

Flutter — Introduction

Widgets — Introduction

IgnorePointer

Code Implementation

Code File

Conclusion

What is Flutter?

Flutter is Google’s open-source UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Widgets

Widget is a way to declare UI in a flutter. Flutter provides several widgets that help you build apps that follow Material Design that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state.

IgnorePoiner

IgnorePointer is a built-in widget that prevents their children’s widget from pointer-events like tapping, dragging, scrolling, and hover. This widget ignores the pointer-events without terminating them.

Constructor: Creates a widget that is invisible to hit testing.

Properties

ignoring -> takes bool value and decides whether to ignore pointer event or not
ignoringSemantics -> Whether the semantics of this widget is ignored when compiling the semantics tree

Code Implementation

Let’s move on the coding part

This widget is used to prevent unnecessary touch of UI. It is very simple just wrap your widget inside the IgnorePointer widget.

First, we create a widget and wrap it into the IgnorePointer widget.

In this snippet, we are using a button that is wrapped with the IgnorePointer widget. When ignoring is true RaisedButton can’t perform any action. So, IgnorePointer ignoring all the pointer-events. The code is shown below.

Code File

import 'package:flutter/material.dart';

class MyIgnorePointer extends StatefulWidget {
  @override
  _MyIgnorePointerState createState() => _MyIgnorePointerState();
}

class _MyIgnorePointerState extends State<MyIgnorePointer> {
  bool _isIgnore = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Ignore Pointer Demo'),
        ),
      body: Builder(
        builder: (context) => Center(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IgnorePointer(
                  ignoring: _isIgnore,
                  child: Column(
                    children: <Widget>[

                      Container(
                        width:  MediaQuery.of(context).size.width,
                        height: 55,
                        child: RaisedButton(
                          child: Text('Click me',style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.bold
                          ),),
                          onPressed: (){
                         
                            showAlertDialog(context);
                          },
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(
                                Radius.circular(8)),
                          ),
                          color: Colors.blue,

                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('Enable Ignore Pointer?'),
                    Switch(
                        value: _isIgnore,
                        onChanged: (bool value) {
                          setState(() {
                            _isIgnore = value;
                          });
                        }),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  showAlertDialog(BuildContext context) {

    // set up the button
    Widget okButton = FlatButton(
      child: Text("OK"),
      onPressed: () {
        Navigator.pop(context);
      },
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      title: Text("Message"),
      content: Text("Button is pressed."),
      actions: [
        okButton,
      ],
    );

    // show the dialog
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }}

Conclusion

In this article, I have explained the IgnorePointer widget demo, which you can modify and experiment with according to your own. This little introduction was about to prevent user touch of UI.

I hope this blog will provide you with sufficient information in trying up IgnorePointer Widgets in your flutter projects. We will show to prevent the UI from user interaction, some properties using in “ignoring”, and make a demo program for working IgnoringPointer in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

TabBar Widget in Flutter

Shaiq Khan
-
0
TabBar Widget in Flutter

In this blog, We are going to discuss about the TabBar. How the TabBar works. And why we use Tabbar. and we will discuss how to display a horizontal row of tabs and display a widget that corresponds to the currently selected tab. We will explain all these in a demo. Now let’s start.

Table of Contents :

Flutter

TabBar

Demo Module

Code Implementation

Code File

Conclusion

Flutter:

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single code base in record time ”

TabBar:

The TabBar is used mainly to navigate different screens in one screen. This is what you need first to build the TabBarController. There are two ways to do this. By using the DefaultTabbarController or by creating a TabController.

We mainly need 3 components to create this TabBar.

  1. Create a TabController.
  2. Create the tabs.
  3. TabBarView.

TabController: The TabController is used to control the movement between created tabs.

TabController(length: list.length, vsync: this);

Create Tabs: We need a scaffold to create a TabBar. It should have a bottom attribute. Tabs are a list of forms. This means that it is necessary to have as many tabs as you are making.

bottom: new TabBar(
  tabs: <Widget>[
    Tab(icon: Icon(Icons.cake)),
    Tab(icon: Icon(Icons.android)),
    Tab(icon: Icon(Icons.phone_android)),
  ],
),

TabView: When we press any TabBar using the TabView, we see a new page.

For Example, We can see the WhatsApp App as if we click any tab, then a different page appears on the different tabs.

Demo Module:

Code Implementation:

There are two buttons in this screen, which on clicking will navigate us to the result of the tabbar on the screen.

DefaultTabBarController:

In this screen, we have used the DefaultTabBarController for TabBar. The TabBar DefaultTabBarController is an inherited widget. It is used to share a TabController with a TabBar or TabBarView.If you are using the stateless widget. The best approach is to use DefaultTabController.And in TabBar we have used 3 different icons. On Tap its icon, we have shown different view in TabbarView.

Let us understand this with the help of a reference.

DefaultTabController(
  length: 3,
  child: new Scaffold(
    appBar: new AppBar(
      title: new Text("TabBar Widget"),
      bottom: new TabBar(
        tabs: <Widget>[
          Tab(icon: Icon(Icons.cake)),
          Tab(icon: Icon(Icons.android)),
          Tab(icon: Icon(Icons.phone_android)),
        ],
      ),
    ),
    body: new TabBarView(
      children: <Widget>[
        Container(
          color: Colors.deepOrangeAccent,
          child: new Center(
            child: new Text(
              "Cake",
              style: textStyle(),
            ),
          ),
        ),
      ],
    ),
  ),
)

The DefaultTabController results can be seen in the image.

Custom TabController:

In this screen, a custom TabController is used in the TabBar. For This stateful widget is used.

Let us understand this with the help of a reference.

First of all create a Stateful Widget.which should be SingleTickerProviderStateMixin.

class CustomTabBarDemo extends StatefulWidget {
  @override
  _CustomTabBarDemoState createState() => _CustomTabBarDemoState();
}

class _CustomTabBarDemoState extends State<CustomTabBarDemo> with SingleTickerProviderStateMixin {
}

To create a tab in it, create a tab list and create an object of its TabController.

List<Widget> list = [
  Tab(icon: Icon(Icons.android)),
  Tab(icon: Icon(Icons.add_shopping_cart)),
  Tab(icon: Icon(Icons.card_giftcard)),
  Tab(icon: Icon(Icons.phone_android)),
];
//////////////////////////////////////////////
TabController _tabController;

Initalize the TabController inside the initState() method and also override it in the dispose() method.

@override
void initState() {
  super.initState();
  _tabController =
      TabController(length:list.length, vsync: this);// initialise it here
}

@override
void dispose() {
  _tabController.dispose();
  super.dispose();
}

The CustomTabBar results can be seen in the image.

Code File:

I am posting the code of both examples. Which I have created as a demo in this blog.

DefaultTabBarController Code File:

import 'package:flutter/material.dart';
class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    textStyle() {
      return TextStyle(color: Colors.white, fontSize: 30.0);
    }
    return new DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title:Text("TabBar Widget"),
          bottom:TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.cake)),
              Tab(icon: Icon(Icons.android)),
              Tab(icon: Icon(Icons.phone_android)),
            ],
          ),
        ),
        body:TabBarView(
          children: <Widget>[
            Container(
              color: Colors.deepOrangeAccent,
              child:Center(
                child:Text(
                  "Cake",
                  style: textStyle(),
                ),
              ),
            ),
            Container(
              color: Colors.blueGrey,
              child:Center(
                child:Text(
                  "Android",
                  style: textStyle(),
                ),
              ),
            ),
            Container(
              color: Colors.teal,
              child:Center(
                child:Text(
                  "Mobile",
                  style: textStyle(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Custom TabBarController Code File:

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

class _CustomTabBarDemoState extends State<CustomTabBarDemo> with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController =
        TabController(length:list.length, vsync: this);// initialise it here
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  List<Widget> list = [
    Tab(icon: Icon(Icons.android)),
    Tab(icon: Icon(Icons.add_shopping_cart)),
    Tab(icon: Icon(Icons.card_giftcard)),
    Tab(icon: Icon(Icons.phone_android)),
  ];

  textStyle() {
    return TextStyle(color: Colors.black, fontSize:20.0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          isScrollable: true,
          tabs:list,
          indicator: UnderlineTabIndicator(
              borderSide: BorderSide(width: 2.0,color:Colors.white),
              insets: EdgeInsets.symmetric(horizontal:0.0)
          ),


//        /  indicatorPadding: EdgeInsets.all(0.0),
          indicatorWeight: 4.0,
          labelPadding: EdgeInsets.only(left:30.0, right:30.0),
        ),
        title: Text('tabBar'),

      ),

      body: TabBarView(
        controller: _tabController,
        children: [
          Center(
              child: Text(
                'Cake',
                style: textStyle(),
              )),
          Center(
              child: Text(
                'Cart',
                style: textStyle(),
              )),
          Center(
              child: Text(
                'GiftCard',
                style: textStyle(),
              )),
          Center(
              child: Text(
                'Phone',
                style: textStyle(),
              )),
        ],
      ),

    );
  }
}

Conclusion :

In this article, I have explained a TabBar widget demo, which you can modify and experiment with according to your own, this little introduction was from the TabBar widget from our side.

I hope this blog helps will provide you with sufficient information in Trying up the TabBar List widget in your flutter project. In this demo explain the TaBar widget in flutter. So please try it.

❤ ❤ Thanks for reading this article ❤❤

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Local Authentication in Flutter — Passcode

Shaiq Khan
-
0
Local Authentication in Flutter — Passcode

Hello and welcome to my new blog on Passcode authentication. In this blog, we shall learn and explore how we can implement a simple local authentication using a passcode. This type of authentication is much secure and private also it is extremely fast. Another user how doesn’t know your passcode can’t access your app content directly. This type of authentication removes the server-side errors and provides clean checkout to access the app.

Please give it a try by yourself and try to find out how we can implement this type of functionality with ease. Hopefully, we will require some pub packages as well so please try to find out by yourself which package might help to implement this functionality.

Demo Module:

So what your thought on this? please share your approach on this functionality. Now here is mine, so let’s go……

The packages that we are going to use are:

get_it | Dart Package
This is a simple Service Locator for Dart and Flutter projects with some additional goodies highly inspired by Splat…pub.dev

provider | Flutter Package
English | Português | 简体中文 A wrapper around InheritedWidget to make them easier to use and more reusable. By using…pub.dev

shared_preferences | Flutter Package
Wraps platform-specific persistent storage for simple data (NSUserDefaults on iOS and macOS, SharedPreferences on…pub.dev

  • We will use the provider package for state management.
  • shared_preferences package us various methods to store our data inside our app locally and safely.
  • get_it help us to register our services in a very simple and easy way.

State management technique used in this module

Before getting into the functionality part let’s first learn the state management structure of the app.

  • We have created a file baseModel.dart that contains a BaseModel class that extends ChangeNotifier . In this file, we will write all the common methods that we will use throughout our app such as implementing circular progress indicator when and method is awaited.
  • For each screen, we will create a separate file that will contain all the code that will handle all the methods that will provide the data for that particular screen from the internet server or local server. Each file will extends BaseModel in general ChangeNotifier.
  • We will create a separate widget that we will use to access the provider methods or class.BaseView can only be used for the model class that extends BaseModel .
  • Please go through the bellow blogs for a better understanding of this state management technique.

Flutter and Provider Architecture using Stacked
In this series, we will be taking an extensive look at how I will architect the applications for my clients moving…www.filledstacks.com

Let’s start our code:

  • Create a baseModel.dart file that extends ChangeNotifier.
import 'package:flutter/material.dart';

class BaseModel extends ChangeNotifier {}
  • Create a sharedPrefs.dart file that will contain the passCode uploading and fetching code from the local store and this model will be used for the passcode check out screen.

Uploading the passCode value:

setPassCode(int passCodeValue) async {
  SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
  sharedPreferences.setInt('passCode', passCodeValue);
}

sharedPreferences is an object of SharedPreferences that will provide us access to all the methods. This method takes a passCodeValue int that will be stored under the ‘passCode' key.

sharedPreferences.setInt('passCode', passCodeValue);

setInt method creates a passCode key in the app local storage and store the passCodeValue in it.

Fetching the passCode value:

First, create a variable that will store the fetched value of the passCode from the local server.

int _passCode;

int get passCode => _passCode;

passCode is a getter of _passCode that get and store the value of _passCode whenever it is changed.

getPassCode method is used to fetch the value of passCode . To get the value of the passCode key SharedPreferences provides us getInt method.

getPassCode() async {
  SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
  int code = sharedPreferences.getInt('passCode');
  print("**************" + code.toString());
  _passCode = code;
  notifyListeners();
}

Full File:

import 'package:local_passcode_auth/baseModel.dart';
import 'package:shared_preferences/shared_preferences.dart';

class SharedPrefs extends BaseModel {
  int _passCode;

  int get passCode => _passCode;

  setPassCode(int passCodeValue) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    sharedPreferences.setInt('passCode', passCodeValue);
    //upload the passCodeValue
  }

  getPassCode() async {
    SharedPreferences sharedPreferences = await     SharedPreferences.getInstance();
    int code = sharedPreferences.getInt('passCode');
    //fetch the passCode value
    print("**************" + code.toString());
    _passCode = code;
    notifyListeners();
    //informs the passCode getter that the value has been changed              and it will update the ui wherever it is used.
  }
}
  • Regester all the models using the get_it

locator.dart file:

import 'package:get_it/get_it.dart';
import 'package:local_passcode_auth/sharedPrefs.dart';

import 'baseModel.dart';

final locator = GetIt.instance;

void setupLocator() {
  locator.registerLazySingleton(() => BaseModel());
  locator.registerLazySingleton(() => SharedPrefs());
}
  • initialize the setupLocator() method inside the main method
void main() {
  setupLocator();
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      darkTheme: ThemeData(),
      home: MyApp(),
    ),
  );
}

baseView.dart file:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'baseModel.dart';
import 'locator.dart';

class BaseView<T extends BaseModel> extends StatefulWidget {
  final Widget Function(BuildContext context, T model, Widget child) builder;
  final Function(T) onModelReady;

  BaseView({@required this.builder, this.onModelReady});

  @override
  _BaseViewState<T> createState() => _BaseViewState<T>();
}

class _BaseViewState<T extends BaseModel> extends State<BaseView<T>> {
  T model = locator<T>();

  @override
  void initState() {
    if (widget.onModelReady != null) {
      widget.onModelReady(model);
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<T>.value(
      //builder: (context) => model,
      child: Consumer<T>(builder: widget.builder),
      //notifier: model,
      value: model,
    );
  }
}

checkoutPage.dart file:

This page is our main page that will contain a simple TextField that will take the passCode from the user and verify it with the fetched Passcode, if both the values are the same then we will navigate it to the HomePage .

Here we will require the sharedPrefs fetch and upload methods that we have created in sharedPrefs.dart file.

To use SharedPrefs class we need to use the BaseView class. BaseView class provides us builder, onModelReady property to build the builder of the Consumer and onModelReady will be used to initialize the methods or values inside the initStatemethod.

Data Flow of this file:

  • When this Widget is called inside the init state model.setPassCode(1234), model.getPassCode() will be called so that the passCode getter in the sharedPrefs.dart can get the value of the passcode. BaseView provides us onModelReady method to initialize the methods inside the initState() method.
  • Now we can use use the value of the passCode getter inside our builder.
  • We have created a TextField that will take the value of passCode form the user and when the user will click on the right arrow button then the onPressed property of icon will check the condition if it is true then the user will be navigated to the HomePage.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:local_passcode_auth/baseView.dart';
import 'sharedPrefs.dart';
import 'homePage.dart';

// ignore: must_be_immutable
class CheckoutPage extends StatelessWidget {
  TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return BaseView<SharedPrefs>(
      onModelReady: (model) {
        model.setPassCode(1234);
        model.getPassCode();
      },
      builder: (context, model, child) => Scaffold(
        backgroundColor: Colors.black,
        body: Padding(
          padding: const EdgeInsets.all(10),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 20, right: 20),
                  child: TextField(
                    controller: textEditingController,
                    decoration: InputDecoration(
                      suffixIcon: IconButton(
                        onPressed: () {
                          if (model.passCode.toString() ==
                              textEditingController.text) {
                            Navigator.pop(context);
                            Navigator.of(context).push(PageRouteBuilder(
                                pageBuilder:
                                    (context, animation, anotherAnimation) {
                                  return HomePage();
                                },
                                transitionDuration: Duration(milliseconds: 600),
                                transitionsBuilder: (context, animation,
                                    anotherAnimation, child) {
                                  animation = CurvedAnimation(
                                      curve: Curves.easeIn, parent: animation);
                                  return SlideTransition(
                                    position: Tween(
                                            begin: Offset(-1.0, 0.0),
                                            end: Offset(0.0, 0.0))
                                        .animate(animation),
                                    child: ScaleTransition(
                                      scale: animation,
                                      child: child,
                                    ),
                                  );
                                }));
                          } else
                            print("failed");

                          print("************+++" + model.passCode.toString());
                        },
                        icon: Icon(Icons.forward),
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(5),
                      ),
                      labelText: "Enter PIN",
                    ),
                    obscureText: true,
                    autofocus: true,
                    cursorColor: Colors.grey,
                    keyboardAppearance: Brightness.dark,
                    keyboardType: TextInputType.number,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

GitHub File:

flutter-devs/local_passcode_auth
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Improving Rendering Performance in Flutter App

Shaiq Khan
-
0
Improving Rendering Performance in Flutter App

In order to maintain app performance, we make every possible effort but any app’s performance relies on two main things which are time and space. The space-related issue is explained in my previous blog where I have explained how to reduce app size and make your app performant.

Rendering is the key factor that provides smoothness to the app and it depends on the fps.

You must be thinking about how no of frames per second can help in the app performance and you must have heard a lot about 60 fps and 16 milliseconds barries. So for information Human mind reacts according to the visual signals sent by the eyes and there is no concept of frames in this regard but the concept of motion has its own effect in this regard. By displaying images at a faster speed you can trick the mind into perceiving motion and here the concept of fps(Frames per second)comes into the effect. It means a concept of motion is a kind of hack of mind.

It needs a minimum of 10–12 frames per second when the human mind starts perceiving motion but it does not look smooth, 24 frames per second allow the human eye to see fluid motion but in movies and videos it takes at least 60 frames per second where a human mind easily feels a smooth motion with fluency.

So the formula would look like

1000ms / 60 frames = 16.666 ms/frame

It means you need to replace every frame in 16.66 milliseconds to do your work computing, input, network, and rendering if you are not able to do this you need to find out where your app lacks and where it needs improvement.

Identifying Performance

In order to identify the performance issue, you just need to open tools here you can identify the no of times the widget is rebuilding and where you need to correct or need to make some changes to your code.

Improve Rendering performance

If the performance is the issue rendering is the factor that comes first in the list we need to deal with, but flutter’s Skia engine takes care of it. Generally, if we are dealing with performance issues there are some common pitfalls

  • Rebuilding more of the UI in every frame

So try not to write code for the whole screen in a single Stateful Widget that may cause unnecessary UI building, you need to split code into smaller widgets and smaller build functions.

  • Building a large list of children directly and operating things up higher in the tree using setState().

So setState() affects apps rendering performance more than anything so instead of calling high up on the tree try to call it on the specific part of the subtree.

How to Improve Performance?

In order to improve build performance, there are some steps which we need to improve and some of them are

Controlling build()

  • Repetitive code and heavy work should be avoided in the build() method so the build() method can be invoked frequently when widgets are rebuilt.

Apply Effects when needed

Applying effects are always expensive because it causes or responsible to create saveLayer() behind the scenes.

Why is savelayer expensive?

Calling saveLayer() allocates an offscreen buffer. Drawing content into the offscreen buffer might trigger render target switches that are particularly slow in older GPUs.

Some rules need to be followed

  • Use the Opacity widget if it is necessary if you using it for a single image there are various options to doing so because For example, Container(color: Color.fromRGBO(255, 0, 0, 0.5)) is much faster than Opacity(opacity: 0.5, child: Container(color: Colors.red)).

Directly drawing an Image or Color with opacity is faster than using Opacity on top of them because Opacity could apply the opacity to a group of widgets and therefore a costly offscreen buffer will be used. Drawing content into the offscreen buffer may also trigger render target switches and such switching is particularly slow in older GPUs.

Clipping doesn’t call saveLayer() (unless explicitly requested with Clip.antiAliasWithSaveLayer) so these operations aren’t as expensive as Opacity, but clipping is still costly, so use with caution. By default, clipping is disabled (Clip.none), so you must explicitly enable it when needed.

Some widgets are costly because they call saveLayer() and are potentially costly

  • Shader Mask
  • color filter
  • chip
  • text

There are also some other widgets you may call instead such as to provide fading in an image we can call FadeInImage because it applies gradual opacity using GPU’S fragment shader. In order to provide a rounded corner, we should prefer a border-radius instead of clipping.

Rendering Grids and Lists lazily can help to build up the potion which is going to be seen firstly.

Manage Shader Compilation Jank

If any animation seems janky during the first run but after it works fine maybe this is an issue of shader compilation jank.

More deeply and technically, Shader is a set of code that runs on a GPU( Graphics processing unit). A smooth frame needs to be drawn within 16 milliseconds for a 60 fps display but during the compiling shader takes more time than it should take. it could be nearly a few hundred milliseconds and it causes tens of frames to be missed and drops the fps from 60 to 6.

How to sort it out?

As a Solution for this after the release of Flutter 1.20, Flutter provides command-line tools for developers and by this developers can collect shaders that might be needed for the end-users in the Skia Shader Language format. Once SkSL shader will be packaged into the app then it will automatically be pre-compiled when the end-user opens the app.

There are few commands to perform the action

Run the app with --cache-sksl turned on to capture shaders in SkSL:

flutter run --profile --cache-sksl

If the same app has been previously run without --cache-sksl, then the --purge-persistent-cache the flag may be needed:

flutter run --profile --cache-sksl --purge-persistent-cache

This flag removes older non-SkSL shader caches that could interfere with SkSL shader capturing. It also purges the SkSL shaders so use it only on the first --cache-sksl run.

Build the app with SkSL warm-up using the following, as appropriate:

Android

flutter build apk — bundle-sksl-path flutter_01.sksl.json

Ios

flutter build ios --bundle-sksl-path flutter_01.sksl.json

Conclusion

These are some techniques to improve rendering performance that may help to make the app performant. Sometimes animations, growing list, some widgets (generally call saveLayer()) make an app janky and more rendering so in order to maintain these things we must make focus on the points mentioned above.

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

If this article has helped you a bit and found interesting please clap!👏

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

1...505152...75Page 51 of 75

EDITOR PICKS

POPULAR POSTS

PAGES

About

Disclaimer

Terms & Conditions

Privacy Policy

Contact

ABOUT US

FlutterExperts are here to share their Flutter knowledge with the developer community.

Contact us: info@flutterexperts.com

FOLLOW US

© Copyright 2024 FlutterExperts. All Rights Reserved.