Google search engine
Home Blog Page 14

Cupertino Context Menu In Flutter

0

CupertinoContextMenu is a full-screen modular course that opens when the child is for quite some time squeezed. At the point when open, the CupertinoContextMenu shows the child, or the widget returned by previewBuilder whenever given, in an enormous full-screen Overlay with a list of buttons determined by activities. The child/preview is put in an Expanded Widget so it will develop to fill the Overlay assuming its size is unconstrained.

This blog will explore the Cupertino Context Menu In Flutter. We perceive how to execute a demo program. We are going to learn about how we can utilize CupertinoContextMenu and how to customize the style of Cupertino tabBar using various properties in your flutter applications.

CupertinoContextMenu class – cupertino library – Dart API
A full-screen modal route that opens when the child is long-pressed. When open, the CupertinoContextMenu shows the…api. flutter.dev

Table Of Contents::

Introduction

Constructor

Parameters

Code Implement

Code File

Conclusion



Introduction:

Cupertino context menu is a flutter used to show an ios style context menu or popup menu. It is additionally called an overflow menu. A CupertinoContextMenu widget shows a display that on lengthy press will show the context menu with activities for that child. It proves to be useful when we need to show more choices for a child in a little space.

We can excuse the menu in two ways. One is by tapping the background of the overlay that seems when the menu is shown. The subsequent technique is by utilizing the Navigator. pop capability inside onPressed callback of CupertinoMenuAction widget.

Demo Module ::

This demo video shows how to create a Cupertino context menu in a flutter and shows how a Cupertino context menu will work in your flutter applications. We will show an image on the screen. When the user tap on this image then, the menu will pop up. It will be shown on your device.

Constructor:

To utilize CupertinoContextMenu, you need to call the constructor underneath:

CupertinoContextMenu({
Key? key,
required this.actions,
required this.child,
this.previewBuilder,
})

To make a Cupertino setting menu in flutter we need to call the constructor of CupertinoContextMenu class and give the required properties. The Cupertino context menu has two required properties child and actions. The child acknowledges the widget as value. For actions, we can utilize any actions yet, for the most part, will utilize CupertinoContextMenuAction actions.

Properties:

There are some properties of CupertinoContextMenu are:

  • > child — This property is utilized to show a widget for which we will show our Cupertino setting menu. It accepts any widget as a value.
  • > actions — This property is used to show actions or items for our Cupertino setting menu. It will acknowledge a list of widgets as value. Be that as it may, by and large, we will involve CupertinoContextMenuAction widgets for this list.
  • > previewBuilder — This property is used in the Cupertino context menu that appears with a preview of the child when we long press the child. We will use this property if we want to change the look of the child that appears in the preview.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

We should make a model where we will execute the Cupertino context menu in a flutter. In this model, we will show a picture for which the context menu will show up. We will show the menu with three actions share, save to gallery, and delete. At the point when we long-press the picture, we will expand the picture size to fit the screen utilizing previewBuilder.

Center(
child: Container(
margin: const EdgeInsets.all(40),
width: double.infinity,
child:CupertinoContextMenu(
actions:[
CupertinoContextMenuAction(
onPressed: (){
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.share,
child:const Text("Share"),
),
CupertinoContextMenuAction(
onPressed: (){
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.down_arrow,
child:const Text("Save To Gallery"),
),
CupertinoContextMenuAction(
onPressed: (){
Navigator.of(context).pop();
},
isDestructiveAction: true,
trailingIcon: CupertinoIcons.delete,
child: const Text("Delete"),
)
],
child:Image.asset("assets/logo.png",),
),
),
)

Now, we will write a code for previewBuilder. It is increasing the image size when the image is in preview mode.

previewBuilder: (context, animation, child) {
return SizedBox(
height: double.infinity,
width: double.infinity,
child: Image.asset(
'assets/logo.png',
height: 200,width: 300,
),
);
},

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Final Output

Code File:

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_context_menu_demo/splash_screen.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.pink,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);

@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Cupertino Context Menu Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Center(
child: Container(
margin: const EdgeInsets.all(40),
width: double.infinity,
child: CupertinoContextMenu(
actions: [
CupertinoContextMenuAction(
onPressed: () {
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.share,
child: const Text("Share"),
),
CupertinoContextMenuAction(
onPressed: () {
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.down_arrow,
child: const Text("Save To Gallery"),
),
CupertinoContextMenuAction(
onPressed: () {
Navigator.of(context).pop();
},
isDestructiveAction: true,
trailingIcon: CupertinoIcons.delete,
child: const Text("Delete"),
)
],
previewBuilder: (context, animation, child) {
return SizedBox(
height: double.infinity,
width: double.infinity,
child: Image.asset(
'assets/logo.png',
height: 200,
width: 300,
),
);
},
child: Image.asset(
"assets/logo.png",
),
),
),
));
}
}

Conclusion:

In the article, I have explained the Cupertino Context Menu basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Context Menu On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Cupertino Context Menu in your flutter projectsWe will show you what the Introduction is and what are the construction and properties of the Cupertino Context Menu, and make a demo program for working with Cupertino Context Menu 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 a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on FacebookGitHubTwitter, and LinkedIn.

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.


Cupertino TabBar In Flutter

0

We need to utilize the Cupertino tabbar with a CupertinoTabScaffold to naturally reflect new information when there is a tab change. We can likewise utilize the tabbar without the cupertinoTabScaffold. All things considered, we need to pay attention to tab changes physically. We need to call setState to refresh the ongoing Index with the chosen tab list to reflect new information.

Whenever there is an adjustment of a tab it will set off a difference in the navigator. Every navigator will have a different route stack. We can accomplish this sort of conduct by utilizing CupertinoTabView inside the tabBuilder of CupertinoTabScaffold.

This blog will explore the Cupertino TabBar In Flutter. We perceive how to execute a demo program. We are going to learn about how we can utilize Cupertino tabBar and also learn how to customize the widget using various properties in your flutter applications.

CupertinoTabBar class – cupertino library – Dart API
API docs for the CupertinoTabBar class from the Cupertino Library, for the Dart programming language.api.flutter.dev

Table Of Contents::

Introduction

Constructor

Parameters

Code Implement

Code File

Conclusion



Introduction:

Cupertino tabbar is the only ios style bottom tabbar or bottom navigation bar in a flutter. A CupertinoTabBar widget allows us to add ios like tabbar to our application. It is like the bottom navigation bar in flutter for the android stage.

It shows a row of tabs where every tab will have a label and a symbol. The primary tab will be dynamic as a default. Every tab will be fabricated utilizing the BottomNavigationBarItem widget.

Demo Module ::

This demo video shows how to create a Cupertino tabBar in a flutter and shows how a Cupertino tabBar will work in your flutter applications. We will show a row of tabs with labels and icons. When the user press that tab then, only this screen will be shown at that time. It will be shown on your device.

Constructor:

To utilize CupertinoTabBar, you need to call the constructor underneath:

const CupertinoTabBar({
Key? key,
required this.items,
this.onTap,
this.currentIndex = 0,
this.backgroundColor,
this.activeColor,
this.inactiveColor = _kDefaultTabBarInactiveColor,
this.iconSize = 30.0,
this.height = _kTabBarHeight,
this.border = const Border(
top: BorderSide(
color: _kDefaultTabBarBorderColor,
width: 0.0, // 0.0 means one physical pixel
),
),
})

To make a Cupertino tabbar in flutter we need to utilize CupertinoTabBar class. We need to call the constructor of the class and give the required properties. Tabbar has just a single required property items. We ought to give a list of BottomNavigationBarItem(s) as values for items.

Properties:

There are some properties of CupertinoTabBar are:

  • > items — This property is utilized to give items to the Cupertino tabbar. It takes a list of BottomNavigationBarItems as value.
  • > onTap — This property is utilized for the callback function that will summon when the client taps on a tab. Inside this function, we will get the index of the chosen tab. We need to set this value to the currentIndex property and call setState to refresh the choice in UI. We can avoid this property assuming we utilize the tabbar with the cupertinoTabScaffold widget.
  • > currentIndex — This property is utilized to show the as-of-now chosen tab. It takes an int as value. We can avoid this property assuming we utilize the tabbar with the cupertinoTabScaffold widget.
  • > backgroundColor — This property is utilized to apply or change the background color of the tabbar. It takes CupertinoColors or Colors class consistent as value.
  • > activeColor — This property is utilized to change the color of the active tab means the tab that is currently selected.
  • > inactiveColor — This property is utilized to change the color of the inactive tab means the tab that is not selected.
  • > iconSize — This property is utilized to change the size of the icon of the tabbar. It takes double as value.
  • > border — This property is utilized to provide a border to the tabbar. It takes Border class as the value.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In the main. dart file, we will create a MyHomePage class. In this class. we will first let’s declare a list that will hold the widgets for the tabs.

List<Widget> data = [const HomeScreenTab(), const ProfileScreenTab()];

In the body, we will add the CupertinoTabScaffold to the child of the CupertinoPageScaffold widget. Give CupertinoTabBar to tabbar property of CupertinoTabScaffold.

Give a callback function to the tabBuilder property of the CupertinoTabScaffold widget. This callback function will give the index of the as-of-now chosen tab. Return the widget in light of the file inside the callback function.

CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: Colors.blueGrey,
activeColor: Colors.white,
inactiveColor: Colors.grey,
items: const [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person),
label: "Profile",
)
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
builder: (context) {
return data[index];
},
);
},
)

Create a new dart file called HomeScreenTab.dart inside the lib folder.

In this HomeScreenTab class, we will return the Material method. In this method, we will add a column widget. In this widget, we will add an image and the Text “This is Home Page”.

class HomeScreenTab extends StatelessWidget {
const HomeScreenTab({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/logo.png",height: 270,width: 350,),
const Text(
"This is Home Page",
style: TextStyle(fontSize: 20),
),
],
),
);
}
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

HomeScreenTab Output

Create a new dart file called ProfileScreenTab.dart inside the lib folder.

In this ProfileScreenTab class, we will return the Material method. In this method, we will add a column widget. In this widget, we will add an image and the Text “This is Profile Page”.

class ProfileScreenTab extends StatelessWidget {
const ProfileScreenTab({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/powered_by.png",height: 270,width: 400,),
const Text(
"This is Profile Page",
style: TextStyle(
fontSize: 20,
),
),
],
),
);
}
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

ProfileScreenTab Output

Code File:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_tabbar_demo/splash_screen.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);

@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}

class _MyHomePageState extends State<MyHomePage> {
List<Widget> data = [const HomeScreenTab(), const ProfileScreenTab()];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Cupertino TabBar Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: Colors.blueGrey,
activeColor: Colors.white,
inactiveColor: Colors.grey,
items: const [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person),
label: "Profile",
)
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
builder: (context) {
return data[index];
},
);
},
)
);
}
}

class HomeScreenTab extends StatelessWidget {
const HomeScreenTab({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/logo.png",height: 270,width: 350,),
const Text(
"This is Home Page",
style: TextStyle(fontSize: 20),
),
],
),
);
}
}

class ProfileScreenTab extends StatelessWidget {
const ProfileScreenTab({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/powered_by.png",height: 270,width: 400,),
const Text(
"This is Profile Page",
style: TextStyle(
fontSize: 20,
),
),
],
),
);
}
}

Conclusion:

In the article, I have explained the Cupertino TabBar basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino TabBar On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Cupertino TabBar in your flutter projectsWe will show you what the Introduction is. What are the construction and properties of Cupertino TabBar, make a demo program for working Cupertino TabBar 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 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 FacebookGitHubTwitter, 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.


Adapter Design Patterns For Dart & Flutter

0

With the Adapter design, you make a go between two contrary class interfaces, permitting one to work with the other. This works a lot like actual adapters, in reality, for example, those that join a power line to empower a device to draw power from an unfamiliar power outlet.

Or on the other hand, those that empower you to peruse data from one type of memory card in a drive made for another type or size. The intermediary class examples of genuine greatness as a scaffold between your client code and another class. You could likewise imagine the adapter class as a wrapper around an object of another class.

In this blog, we’ll explore Adapter Design Patterns For Dart & Flutter. We will perceive how to execute a demo program. Learn how to use it in your flutter applications.

Table Of Contents::

Introduction

General Adapter Pattern

Advanced Adapter Pattern

Conclusion



Introduction:

Designs assist us with molding the connections between the objects and classes we make. These patterns are centered around how classes acquire from one another, how items can be made out of different objects, and how objects and classes interrelate.

The patterns help us in making adaptable, inexactly coupled, interconnecting code modules to get done in a complex sensible manner. There are two unique Adapter designs. The first is known as the Class Adapter pattern, however, it depends on different inheritances, a component Dart doesn’t uphold.

Class Adapter utilizes inheritance to adjust one connection point to another, a method that is dropping off the favor for composition. Thus, we’ll focus on the Object Adapter design, which is completely upheld in Dart, and it’s the most impressive and adaptable of the two methodologies.

General Adapter Pattern:

Envision you’re assembling an application that requirements to utilize a more established shape library for delivering shapes on the screen. In this library, squares are characterized by determining their 2D position, alongside width and height. In your application, it would be more helpful to have the option to make squares from four directions all things being equal.

You can utilize the Adapter example to make a covering around the library’s square class. The adapter will take your application’s favored contentions and naturally adjust them for use with the square class.

How about we perceive how it’s finished:

class Square {
final int x;
final int y;
final int width;
final int height;
  const Square(this.x, this.y, this.width, this.height);
  void render() {
print("Rendering Square...");
}
}
class NewSquare {
Square _square;
NewSquare(int left, int top, int right, int bottom) {
_square = Square(left, top, right - left, bottom - top);
}
void render() => _square.render();
}

In this model, the NewSquare class is the adapter, wrapping a confidential instance of Square. A client can utilize NewSquare, passing the kinds of contentions it views as helpful, and NewSquare will adjust the input to the requirements of Square.

At the point when the client considers the NewSquare class’ render() strategy, the call is undetectably diverted to the one in Square. On the off chance that these were genuine illustration classes, delivering either form would create an indistinguishable square shape on the screen, however through various points of interaction.

Note: The Adapter design is frequently implemented with an explicit point of interaction for the wrapper, however, I’ve avoided that with regard to this model. Dart doesn’t uphold explicit connection points, since each class implicitly sends out a connection point.

Advanced Adapter Pattern:

In this model, we’ll profess to make an application that totals social entertainment posts from different sites. These posts will come from a few divergent sources, each with its API and information format. We can utilize the Adapter example to keep things coordinated and disguise the intricacy inborn in supporting numerous conventions.

In the first place, we should check our MediaPost model out:

class MediaPost {
final String title;
final String content;
const MediaPost(this.title, this.content);
}

This straightforward model characterizes properties to hold a title and some sort of text content. The constructor just sets those properties from passed contentions. Regardless of where posts come from, the application needs them to wind up in this arrangement.

Then, the following are two mock APIs for recovering mediaPosts:

class MediaApi1 {
String getMedia1Posts() {
return '[{"headline": "Title1", "text": "text..."}]';
}
}
class MediaApi2 {
String getMedia2Posts() {
return '[{"header": "Title1", "body": "text..."}]';
}
}

Note that every API has an alternate technique for getting media posts, and although the two of them return content in JSON design, the property names vary. In a genuine application, the techniques might take various contentions to carry out their roles, and clearly, they would as a rule return significantly more satisfied.

To accomplish this, we start by making a point of interaction:

abstract class MediaPostAPI {
List<MediaPost> getMediaPosts();
}

As recently referenced, Dart has no help for explicit connection points, however since all classes trade their connection points, we can utilize a theoretical class to accomplish a comparative outcome. A theoretical class can’t be launched, and it can exclude executions for its techniques.

Presently, we can make adapter classes for every one of the different APIs, and they will carry out MediaPostAPI, guaranteeing they all have a reliable point of interaction to work with.

The adapter classes for the two mediaPost APIs follow:

import 'dart:convert';
class Media1Adapter implements MediaPostAPI {
final api = MediaApi1();
List<MediaPost>getMediaPosts() {
final ImgPosts = jsonDecode(api.getMedia1Posts()) as List;
return ImgPosts.map((mediaPost) =>
MediaPost(mediaPost['headline'], mediaPost['text'])).toList();
}
}
class Media2Adapter implements MediaPostAPI {
final api = MediaApi2();
List<MediaPost>getMediaPosts() {
final ImgPosts = jsonDecode(api.getMedia2Posts()) as List;
return ImgPosts.map((mediaPost) =>
MediaPost(mediaPost['header'], mediaPost['body'])).toList();
}
}

Like the square adapter in the past segment, these connector classes wrap the two different post APIs to impact how client code associates with them. For this situation, they give admittance to the post content by executing MediaPostAPI, which commits them to characterize a getMediaPosts() technique with a mark that matches the point of interaction. Every connector typifies its particular API and calls the suitable API-explicit obtaining strategy in its execution of getMediaPosts().

JSON posts are changed over into MediaPost model objects with the map() technique and returned. Since the map() approach settles into a lazy Iterable, we want to call toList() to change over that into the List<MediaPost> that getMediaPosts() should return. It’s important to import dart:convertto get sufficiently close to the jsonDecode() capability.

final MediaPostAPI api1 = Media1Adapter();
final MediaPostAPI api2 = Media2Adapter();
final List<MediaPost> mediaPost = api1.getMediaPosts() + api2.getMediaPosts();

Since both adapter classes are ensured to have a similar point of interaction as MediaPostAPI, we can type API factors as MediaPostAPI. Presently it’s simple for client code to recover posts from all the APIs without stressing over the subtleties of each, and they’ll continuously return a rundown of MediaPost models reasonable for use in the application.

Conclusion:

I hope this blog will provide you with sufficient information on Trying up the Adapter Design Patterns For Dart & Flutter in your projectsThe Adapter design is one of the most widely recognized and valuable standard design patterns.

It very well may be utilized to make a reliable point of interaction across numerous contrasting APIs or to wrap an item with a less favorable connection point to make it more viable or helpful for client code. The example can be beneficial when your application should communicate with APIs over which you have no control. 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 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 FacebookGitHubTwitter, 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.


Exploring StreamBuilder In Flutter

0

An asynchronous interaction might require an ideal opportunity to wrap up. Once in a while, there can be a few values emitted before the cycle wraps up. In Dart, you can make a capacity that returns a Stream, which can emanate a few values while the asynchronous process is active. Assuming you need to construct a widget in Flutter dependent on the snapshots of a Stream, there’s a widget called StreamBuilder.

In this blog, we will be Exploring StreamBuilder In Flutter. We will also implement a demo program and we show you how to use StreamBuilder in your flutter applications.

Table Of Contents::

Introduction

Constructor

Parameters

Code Implement

Code File

Conclusion



Introducton:

The StreamBuilder can listen to exposed streams and return widgets and catch snapshots of got stream information. The stream builder takes two contentions.

A stream

A Builder, which can change over components of the stream into widgets

The Stream resembles a line. At the point when you enter a value from one side and a listener from the opposite side, the listener will get that value. A stream can have various listeners and that load of listeners can get the pipeline, which will get equivalent value. How you put values on the stream is by utilizing the Stream Controller. A stream builder is a widget that can change over user-defined objects into a stream.

Constructor:

To utilize StreamBuilder, you need to call the constructor underneath:

const StreamBuilder({
Key? key,
Stream<T>? stream,
T? initialData,
required AsyncWidgetBuilder<T> builder,
})

Essentially, you need to make a Stream and pass it as the stream contention. Then, at that point, you need to pass an AsyncWidgetBuilder which can be utilized to construct the widget dependent on the snapshots of the Stream.

Parameters:

There are some parameters of StreamBuilderare:

  • Key? key: The widget’s key, used to control how a widget is supplanted with another widget.
  • Stream<T>? stream: A Stream whose snapshot can be gotten to by the builder function.
  • T? initialData: The data will be utilized to make the initial snapshot.
  • required AsyncWidgetBuilder<T> builder: The build procedure is utilized by this builder.

How to implement code in dart file :

You need to implement it in your code respectively:

Let’s create a Stream:

The following is a function that returns a Stream for generating numbers each one second. You need to utilize the async* keyword for making a Stream. To emit a value, you can utilize yield a keyword followed by the value to be emitted.

Stream<int> generateNumbers = (() async* {
await Future<void>.delayed(Duration(seconds: 2));

for (int i = 1; i <= 10; i++) {
await Future<void>.delayed(Duration(seconds: 1));
yield i;
}
})();

From that point onward, pass it as the stream argument

StreamBuilder<int>(
stream: generateNumbers,
// other arguments
)

Let’s create a AsyncWidgetBuilder

The constructor expects you to pass a named contention builder whose type is AsyncWidgetBuilder. It’s a function with two parameters whose types all together are BuildContext and AsyncSnapshot<T>. The subsequent boundary, which contains the current snapshot, can be utilized to figure out what ought to be rendered.

To make the function, you need to comprehend about AsyncSnapshot first. The AsyncSnapshot is an unchanging portrayal of the latest communication with an asynchronous computation. In this unique situation, it addresses the most recent communication with a Stream. You can get to the properties AsyncSnapshot to get the most recent snapshot of the Stream. One of the properties you might have to utilize is connectionState, an enum whose worth addresses the current association state to an asynchronous computation that is Steam in this unique circumstance.

StreamBuilder<int>(
stream: generateNumbers,
builder: (
BuildContext context,
AsyncSnapshot<int> snapshot,
) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.connectionState == ConnectionState.active
|| snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return const Text('Error');
} else if (snapshot.hasData) {
return Text(
snapshot.data.toString(),
style: const TextStyle(color: Colors.red, fontSize: 40)
);
} else {
return const Text('Empty data');
}
} else {
return Text('State: ${snapshot.connectionState}');
}
},
),

AsyncSnapshot additionally has a property named hasError which can be utilized to check whether the snapshot contains a non-null error value. The hasError value will be valid if the most recent consequence of the asynchronous activity was failed. For getting to the information, first, you can check whether the snapshot contains information by getting to its hasData property which will be valid if the Stream has effectively discharged any non-null value. Then, at that point, you can get the information from the data property of AsyncSnapshot.

Because of the values of the properties above, you can figure out what ought to be rendered on the screen. In the code beneath, a CircularProgressIndicator is shown when the connectionState value is waiting. At the point when the connectionState changes to active or done, you can check whether the snapshot has an error or information. The builder function is called the circumspection of the Flutter pipeline. Thusly, it will get a timing-dependent sub-grouping of the snapshots. That implies in case there are a few values emitted by the Stream at practically a similar time, there’s plausible that a portion of the values is not passed to the builder.

The enum has some possible values:

  • > none: Not associated with any asynchronous computation. It can occur if the stream is null.
  • > waiting: Associated with an asynchronous computation and awaiting collaboration. In this context, it implies the Stream hasn’t been finished.
  • > active: Associated with an active asynchronous computation. For instance, if a Stream has returned any value yet is not finished at this point.
  • > done: Associated with an ended asynchronous computation. In this context, it implies the Stream has finished.

Let set the Initial Data:

You can alternatively pass a worth as the initialData argument which will be utilized until the Stream emits a emits. If the passed value isn’t null, the hasData property will be true at first in any event, when the connectionState is waiting

StreamBuilder<int>(
initialData: 0,
// other arguments
)

To show the initial data when the connectionState is waiting, the if snapshot.connectionState == ConnectionState.waiting then, block in the code above should be adjusted.

if (snapshot.connectionState == ConnectionState.waiting) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(),
Visibility(
visible: snapshot.hasData,
child: Text(
snapshot.data.toString(),
style: const TextStyle(color: Colors.black, fontSize: 24),
),
),
],
);
}

When we run the application, we ought to get the screen’s output like the underneath screen video.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_steambuilder_demo/splash_screen.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Splash(),
debugShowCheckedModeBanner: false,
);
}
}

Stream<int> generateNumbers = (() async* {
await Future<void>.delayed(Duration(seconds: 2));

for (int i = 1; i <= 10; i++) {
await Future<void>.delayed(Duration(seconds: 1));
yield i;
}
})();

class StreamBuilderDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _StreamBuilderDemoState ();
}
}

class _StreamBuilderDemoState extends State<StreamBuilderDemo> {

@override
initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('Flutter StreamBuilder Demo'),
),
body: SizedBox(
width: double.infinity,
child: Center(
child: StreamBuilder<int>(
stream: generateNumbers,
initialData: 0,
builder: (
BuildContext context,
AsyncSnapshot<int> snapshot,
) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(),
Visibility(
visible: snapshot.hasData,
child: Text(
snapshot.data.toString(),
style: const TextStyle(color: Colors.black, fontSize: 24),
),
),
],
);
} else if (snapshot.connectionState == ConnectionState.active
|| snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return const Text('Error');
} else if (snapshot.hasData) {
return Text(
snapshot.data.toString(),
style: const TextStyle(color: Colors.red, fontSize: 40)
);
} else {
return const Text('Empty data');
}
} else {
return Text('State: ${snapshot.connectionState}');
}
},
),
),
),
);
}
}

Conclusion:

In the article, I have explained the basic structure of the StreamBuilder in a flutter; you can modify this code according to your choice. This was a small introduction to StreamBuilder On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the StreamBuilder in your flutter projects. We will show you what the Introduction is?. Show a constructor and parameters of Streambuilder. If you need to build a widget dependent on the result of a Stream, you can utilize the StreamBuilder widget. You can make a Stream and pass it as the stream contention. Then, at that point, you need to pass an AsyncWidgetBuilder work that is utilized to construct a widget dependent on the snapshots of the Stream. 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 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 FacebookGitHubTwitter, 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.


Stream.periodic In Flutter

0

Streams are more uncommon than futures, yet they are similarly as helpful. For those new to streams, it is a strategy to deal with the flow of data from input to output. They are like futures in the manner that they are both asynchronous. This implies we don’t need to wait for them while they do their tasks. The thing that matters is that overall: Streams execute tasks ordinarily; Futures execute operations once.

In this blog, we will explore the Stream. periodic In Flutter. We will see how to implement a demo program and we will see how to use Stream. periodic in your flutter applications.

Stream. periodic constructor — Stream class — dart: async library — Dart API
Creates a stream that repeatedly emits events at period intervals. The event values are computed by invoking…api. flutter.dev

Table Of Contents::

Introduction

Code Implement

Code File

Conclusion



Introduction:

The Stream. periodic constructor, as its name suggests, is utilized to make a stream that communicates events more than once at period intervals. The event esteems are computed by invoking computation. The contention to this callback is a whole number that beginnings with 0 and is increased for each event.

Demo Module ::

The above demo video shows how to use Stream. periodic in a flutter. It shows how Stream. periodic will work in your flutter applications. It shows when the app we are going to build has a background color that changes over time. It also displays an increasing number in the center of the screen. We can stop these relentless behaviors by pressing the floating button. It will be shown on your device.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

First, we will create a final Stream and add a variable that is _myStream is equal to the Stream. periodic in bracket Duration was second is 1, int count and return count.

final Stream _myStream =
Stream.periodic(const Duration(seconds: 1), (int count) {
return count;
});

Now subscription on events from _myStream

late StreamSubscription _sub

The number will be displayed in the center of the screen. It changes over time

int _computationCount = 0;

Background color. In the beginning, it’s blueGrey but it will be a random color later

Color _bgColor = Colors.blueGrey;

Create a initState() method. In this method, we will add variable _sub is equal to _myStream.listen{}. In bracket, we will add setState() method. In this method, we will _computationCount is equal to the event. Also, we will set the background color to a random color.

@override
void initState() {
_sub = _myStream.listen((event) {
setState(() {
_computationCount = event;
      // Set the background color to a random color
_bgColor = Colors.primaries[Random().nextInt(Colors.primaries.length)];
});
});
super.initState();
}

We will create a dispose method. In this method, cancel the stream listener on dispose. Add _sub .cancel()

@override
void dispose() {
_sub.cancel();
super.dispose();
}

In the body, we will add the Center() widget. In this widget, we will add Text _computationCount.toString().

Center(
child: Text(
_computationCount.toString(),
style: TextStyle(fontSize: 150, color: Colors.white),
),
),

Then we will create a FloatingActionButton(). This button is used to unsubscribe the stream listener. When the user press a button, the stream listener was canceled. We will add the background color was red. It’s child property, we will add an Icons. stop. Also, we will add onPressed was _sub. cancel().

floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red,
child: Icon(
Icons.stop,
size: 30,
),
onPressed: () => _sub.cancel(),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Output

Code File:

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math';
import 'package:flutter_stream_periodic_demo/splash_screen.dart';

void main() {
runApp( MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}

class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);

@override
State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
final Stream _myStream =
Stream.periodic(const Duration(seconds: 1), (int count) {
return count;
});

late StreamSubscription _sub;

int _computationCount = 0;

Color _bgColor = Colors.blueGrey;

@override
void initState() {
_sub = _myStream.listen((event) {
setState(() {
_computationCount = event;

_bgColor = Colors.primaries[Random().nextInt(Colors.primaries.length)];
});
});
super.initState();
}

@override
void dispose() {
_sub.cancel();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: _bgColor,
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Flutter Stream.periodic Demo'),
backgroundColor: Colors.white12,
),
body: Center(
child: Text(
_computationCount.toString(),
style: TextStyle(fontSize: 150, color: Colors.white),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red,
child: Icon(
Icons.stop,
size: 30,
),
onPressed: () => _sub.cancel(),
),
);
}

}

Conclusion:

In the article, I have explained the basic structure of Stream. periodic in a flutter; you can modify this code according to your choice. This was a small introduction to Stream. periodic On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Stream. periodic in your flutter projects. We will show you what Introduction is?. Make a demo program for working Stream. periodic. In this blog, we have examined the Stream. periodic of the flutter app. I hope this blog will help you in the comprehension of the Stream. periodic in a better way. 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.

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 FacebookGitHubTwitter, 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.


Explore Table In Flutter

0

A table permits the user to arrange the information in rows and columns. It is utilized to store and show our information in an organized format, which assists us with rapidly contrasting the sets of comparing values.

Flutter likewise permits the user to make a table format in the mobile application. We can make a table in Flutter utilizing the Table widget that involves the table design algorithm for its children. This widget has a few properties to upgrade or change the table design. These properties are border, children, columnWidths, textDirection, textBaseline, and so forth.

This blog will Explore Table In Flutter. We will see how to implement a demo program. We are going to learn about how we can use a table widget in your flutter applications.

Table class – widgets library – Dart API
A widget that uses the table layout algorithm for its children. If you only have one row, the Row widget is more…api. flutter.dev

Table Of Contents::

Introduction

Constructor

Properties

Code Implement

Code File

Conclusion



Introduction:

The Table widget in flutter is used to show our data in a structured format. If we want our data to be shown horizontally, we prefer using the Row widget. If we want to display our data in a single column, we prefer using Column Widget.https://www.youtube.com/embed/_lbE0wsVZSw?feature=oembed

At the point when we need to show the information horizontally as well as vertically, the Table widget is the one that is liked. A table widget can be utilized when we need to store numerous rows with similar column widths, and each column(table) contains equivalent information.

Constructor:

To utilize Table, you need to call the constructor underneath:

Table({
Key? key,
this.children = const <TableRow>[],
this.columnWidths,
this.defaultColumnWidth = const FlexColumnWidth(),
this.textDirection,
this.border,
this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
this.textBaseline,
})

Properties:

There are some properties of Table are:

  • > children — This property is utilized to make a list of table rows as a boundary List<TableRow>. TableRow contains a list of widgets as children.
  • > columnWidths —This property is utilized to decide the width of the sections in the Table widget.
  • > textDirection — This property is used to define the direction in which columns are ordered in Table. It can be either from left to right or from right to left.
  • > defaultColumnWidth —This property is utilized to take in TableColumnWidth class as the information boundary to set the default width of the segment in the Table width.
  • > border — This property is used to take the TableBorder widget as the parameter and it sets the border for the table. By default, there is no border.
  • > defaultVerticalAlignment —This property is utilized to accept TableCellVerticalAlignment as the boundary worth to sets the arrangement of cells vertically in the table.
  • > textBaseline — This property is utilized so we can indicate a horizontal line used to adjust the text on the screen inside the Table widget.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In the main .dart, we will create a MyHomePage class. In this class, we will create a Table widget. With this widget, we create a simple table with five rows and three columns. This is the basic structure of our app after writing out the basic code.

Table(
children: const [
TableRow(children: [
Text("1", style: TextStyle(fontSize: 15.0),),
Text("Mohit", style: TextStyle(fontSize: 15.0),),
Text("25", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("2", style: TextStyle(fontSize: 15.0),),
Text("Ankit", style: TextStyle(fontSize: 15.0),),
Text("27", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("3", style: TextStyle(fontSize: 15.0),),
Text("Rakhi", style: TextStyle(fontSize: 15.0),),
Text("26", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("4", style: TextStyle(fontSize: 15.0),),
Text("Yash", style: TextStyle(fontSize: 15.0),),
Text("29", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("5", style: TextStyle(fontSize: 15.0),),
Text("Pragati", style: TextStyle(fontSize: 15.0),),
Text("28", style: TextStyle(fontSize: 15.0),),
]),
],
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Basic Table Structure Output

So, to make our UI look better, we will add a border to the table with the help of Border property. This property set a border for the table. We will add TableBorder.all with color was green and with was 1.5.

Table(
border: TableBorder.all(color: Colors.green, width: 1.5),
children: const [
TableRow(children: [
Text("1", style: TextStyle(fontSize: 15.0),),
Text("Mohit", style: TextStyle(fontSize: 15.0),),
Text("25", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("2", style: TextStyle(fontSize: 15.0),),
Text("Ankit", style: TextStyle(fontSize: 15.0),),
Text("27", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("3", style: TextStyle(fontSize: 15.0),),
Text("Rakhi", style: TextStyle(fontSize: 15.0),),
Text("26", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("4", style: TextStyle(fontSize: 15.0),),
Text("Yash", style: TextStyle(fontSize: 15.0),),
Text("29", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("5", style: TextStyle(fontSize: 15.0),),
Text("Pragati", style: TextStyle(fontSize: 15.0),),
Text("28", style: TextStyle(fontSize: 15.0),),
]),
],
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Output

For providing different column widths to each column we have a property named columnWidths. The user will set the widths for each column according to your application.

Table(
border: TableBorder.all(color: Colors.green, width: 1.5),
columnWidths: const {
0: FlexColumnWidth(1.5),
1: FlexColumnWidth(4),
2: FlexColumnWidth(2),
},

children: const [
TableRow(children: [
Text("1", style: TextStyle(fontSize: 15.0),),
Text("Mohit", style: TextStyle(fontSize: 15.0),),
Text("25", style: TextStyleOutput(fontSize: 15.0),),
]),
TableRow(children: [
Text("2", style: TextStyle(fontSize: 15.0),),
Text("Ankit", style: TextStyle(fontSize: 15.0),),
Text("27", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("3", style: TextStyle(fontSize: 15.0),),
Text("Rakhi", style: TextStyle(fontSize: 15.0),),
Text("26", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("4", style: TextStyle(fontSize: 15.0),),
Text("Yash", style: TextStyle(fontSize: 15.0),),
Text("29", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("5", style: TextStyle(fontSize: 15.0),),
Text("Pragati", style: TextStyle(fontSize: 15.0),),
Text("28", style: TextStyle(fontSize: 15.0),),
]),
],
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Output

Code File:

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Table Demo"),
backgroundColor: Colors.greenAccent,
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Column(children: <Widget>[
Image.asset(
"assets/logo.png",
height: 250,
width: 250,
),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
"Employee Table",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
const SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.only(left: 15.0, right: 15),
child: Table(
border: TableBorder.all(color: Colors.green, width: 1.5),
columnWidths: const {
0: FlexColumnWidth(1.5),
1: FlexColumnWidth(4),
2: FlexColumnWidth(2),
},
children: const [
TableRow(children: [
Text(
"1",
style: TextStyle(fontSize: 15.0),
),
Text(
"Mohit",
style: TextStyle(fontSize: 15.0),
),
Text(
"25",
style: TextStyle(fontSize: 15.0),
),
]),
TableRow(children: [
Text(
"2",
style: TextStyle(fontSize: 15.0),
),
Text(
"Ankit",
style: TextStyle(fontSize: 15.0),
),
Text(
"27",
style: TextStyle(fontSize: 15.0),
),
]),
TableRow(children: [
Text(
"3",
style: TextStyle(fontSize: 15.0),
),
Text(
"Rakhi",
style: TextStyle(fontSize: 15.0),
),
Text(
"26",
style: TextStyle(fontSize: 15.0),
),
]),
TableRow(children: [
Text(
"4",
style: TextStyle(fontSize: 15.0),
),
Text(
"Yash",
style: TextStyle(fontSize: 15.0),
),
Text(
"29",
style: TextStyle(fontSize: 15.0),
),
]),
TableRow(children: [
Text(
"5",
style: TextStyle(fontSize: 15.0),
),
Text(
"Pragati",
style: TextStyle(fontSize: 15.0),
),
Text(
"28",
style: TextStyle(fontSize: 15.0),
),
]),
],
),
),
]),
);
}
}

Conclusion:

In the article, I have explained the Table’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Table On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide sufficient information on Trying up the Table in your flutter projectsWe will show you what the Introduction is. What are the construction and properties of Table, make a demo program for working with Table 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 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 FacebookGitHubTwitter, 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.


Builder Design Pattern For Dart & Flutter

0

The motivation behind the Builder design is to separate the construction of a complicated object from its representation. This is particularly valuable for objects with numerous properties, some of which might have clear defaults and some of which might be discretionary.

Early object-oriented languages didn’t have a syntax for making what is happening simple to make due, however, Dart, alongside most other fresher languages, has since added highlights that make the Builder design less favorable. All things considered, it merits inspecting both the exemplary example and the syntax that can make it superfluous.

In this blog, we’ll explore Builder Design Pattern For Dart & Flutter. We will perceive how to execute a demo program. We’ll initially realize what the Builder pattern is and why it can help in some object-oriented languages, then we’ll perceive the way Dart can utilize an easier form of the pattern to take care of similar issues. Knowing how to make incredible data models helps hugely when constructing Flutter applications, as well.

Table Of Contents::

Introduction

Generally Builder

Building Models — Dart

Conclusion



Introduction:

Builder pattern means to Separate the construction of a complicated object from its portrayal so a similar construction interaction can make various portrayals.” It is utilized to build a complex object step by step and the last step will return the object. The method involved in constructing an object ought to be generic so making various portrayals of a similar object can be utilized.

The Builder design pattern moves the object development code out of its class to separate objects called builders. Every one of these builders follows a similar connection point and executes separate object development steps. That is, on the off chance that you need an alternate object’s portrayal, simply make an alternate builder class and execute these development steps correspondingly.

Likewise, there is one extra layer in the Builder design pattern— Director. The Director is a basic class that knows about the Builder interface and characterizes the request to execute the building steps. This class isn’t required, however, yet it conceals the subtleties of item development from the client code.

Generally Builder:

One of the most well-known instances of exhibiting the Builder design includes developing iceCream data models. There can be a stunning number of factors while purchasing iceCream, and in more established OOP dialects, that can make the model class abnormal to work with.

To save space here, our iceCream model will not have close to however many adjustable properties as a true model would need, and it will in any case introduce a few clear difficulties.

First, we should characterize a couple of enum types:

enum IceCramSize {
S,
M,
L,
}
enum IceCreamType {
none,
cone,
cup,
brick,
}
enum IceCreamFlavors {
chocolate,
vanilla,
s
trawberry,
}

Characterizing a discrete arrangement of legitimate values for model properties is an extraordinary method for diminishing bugs coming about because of invalid values and can make the code more self-reporting. That is an extravagant approach to saying that utilizing an enum for some settings is better than utilizing nonexclusive strings or numbers.

The iceCream model could begin something like this:

class IceCream {
IceCramSize _size;
IceCreamType _type;
IceCreamFlavors _flavors;
List<String> _toppings;
bool _hasExtraCream;
bool _hasDoubleChocolate;
String _notes;
}

To safeguard the properties from outside obstruction, they’re all private, and that implies just code inside the library can get to them. We’ll have to set them either in constructors or setters.

Imagine IceCream has a default constructor that takes every property all together. Conjuring could seem to be the accompanying:

final iceCream = IceCream(
IceCramSize.M,
IceCreamType.cup,
IceCreamFlavors.chocolate,
['o
reos, caramel'],
false,
false,
null,
);

The listed values and our organizing help, yet there’s still some clumsiness here. Positional constructor boundaries expect values to be passed, in any event, when we don’t require them. Imagine a scenario in which there were no toppings. We’d need to pass a vacant rundown or null for that contention.

Also, consider the possibility that you were attempting to store client decisions in the model as choices were being made. After a size was chosen, you’d need to make an Icecream and pass null for everything except the main boundary. This isn’t great. You can add setter techniques for each property, yet that would be no greater than unveiling them all, presented to inadvertent alteration by outside code.

We should take a gander at how that could change the methodology:

class IceCreamBuilder {
IceCramSize size;
IceCreamType type;
IceCreamFlavors flavors;
List<String> toppings;
bool hasExtraCream;
bool hasDoubleChocolate;
String notes;
}
class IceCream {
final IceCramSize size;
final IceCreamType type;
final IceCreamFlavors flavors;
final List<String> toppings;
final bool hasExtraCream;
final bool hasDoubleChocolate;
final String notes;
IceCream(IceCreamBuilder builder) :
size = builder.size,
type = builder.type,
flavors = builder.flavors,
toppings = builder.toppings,
hasExtraCream = builder.hasExtraCream,
hasDoubleChocolate = builder.hasDoubleChocolate,
notes = builder.notes;
}

Presently the iceCream model is immutable, which is great, and there’s a mutable builder class we can use to assemble the last iceCream piecemeal. IceCream has just a single constructor, and it acknowledges an occasion of IceCreamBuilder. To construct an iceCream, we can benefit ourselves from the adaptability intrinsic in Dart’s outpouring operator:

final builder = IceCreamBuilder()
..size = IceCramSize.M
..type = IceCreamType.cup
..flavors = IceCreamFlavors.Chocolate
..toppings = ['o
reos, caramel']
..hasExtraCream = false
..hasDoubleChocolate = false;
final iceCream = IceCream(builder);

Since IceCreamBuilder has public, mutable properties, it tends to be developed each property in turn, or with any mix of contentions, we have within reach. Any properties we don’t set will default to null, so they don’t need to be expressly allowed. The properties can be changed as a client makes determinations, and we end up with a protected, immutable IceCream.

Building Models — Dart:

To outdo all universes, you can utilize the immutability patterns. Here’s what utilizing those strategies could resemble with our iceCream model:

class IceCream {
final IceCramSize size;
final IceCreamType type;
final IceCreamFlavors flavors;
final List<String> toppings;
final bool hasExtraCream;
final bool hasDoubleChocolate;
final String notes;
Icecream({
this.size,
this.type,
this.flavors,
this.toppings,
this.hasExtraCream = false,
this.hasDoubleChocolate = false,
this.notes
});
Icecream copyWith({
IceCramSize size,
IceCreamType type,
IceCreamFlavors flavors,
List<String> toppings,
bool hasExtraCream,
bool hasDoubleChocolate,
String notes
}) {
return Icecream(
size: size ?? this.size,
type: type ?? this.type,
flavors: flavors ?? this.flavors,
toppings: toppings ?? this.toppings,
hasExtraCream: hasExtraCream ?? this.hasExtraCream,
hasDoubleChocolate: hasDoubleChocolate ?? this.hasDoubleChocolate,
notes: notes ?? this.notes
);
}
}

Every one of the properties in this model is final, which holds them back from being suddenly changed, however, the copyWith() technique empowers you to make immutable copies of the model, just altering values that are passed into the strategy. You need to keep the properties and copyWith() boundaries in sync, however basically there’s not a separate builder class to keep up with.

Named parameters assist with keeping summons decipherable and allow us to characterize reasonable default values, model examples are immutable, and this rendition of the model has a manufacturer included as a component of its design, without any deficiency of the adaptability the Builder design exists to give.

Conclusion:

In the article, I have explained the basic structure of Builder Design Pattern For Dart & Flutter in a flutter; you can modify this code according to your choice. This was a small introduction to Builder Design Pattern For Dart & Flutter On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Builder Design Pattern For Dart & Flutter in your projectsWe’ve quite recently seen that the Builder pattern can be utilized to keep the details of constructing an object separated from its last portrayal. 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 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 FacebookGitHubTwitter, 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.


Exploring Intro Slider In Flutter

0

Onboarding Screen is one o the most well-known that you can see in many applications subsequent to stacking Splash Screen. Onboarding Screen gives a short outline of an application. For the most part, Onboarding Screen comprises three to four designs that slide as we click on Next.

Notwithstanding the way that a user got to the application, the onboarding system should give sufficient data to an educational but interesting cycle while holding the new user.

This article will be Exploring Intro Slider In Flutter. We will see how to implement a demo program. Learn how to create a customizable and beautiful onboarding screen with the help of using the intro_slider package in your flutter applications.

intro_slider | Flutter Package
Flutter Intro Slider is a flutter plugin that helps you make a cool intro for your app. Create intro has never been…pub.dev

Table Of Contents::

Introduction

IntroSlider Properties

Slide Widget Properties

Implementation

Code Implement

Code File

Conclusion



Introduction:

Onboarding must likewise take special care of a huge area of users, going from users got from a showcasing effort, verbal, or seeing an application in the application store. Flutter Intro Slider assists you with making a cool introduction for your application. Making an introduction has never been simpler and quicker

Demo Module :

The above demo video shows how to create a beautiful onboarding screen in a flutter. It shows how onboarding will work using the intro_slider package in your flutter applications. It shows beautiful three designs that slide as we click on Next. It will be shown on your device.

IntroSlider Properties:

There are some properties of IntroSlider are:

  • > slides — This property is used to make a list of slides you want to add as the intro to your app.
  • > onSkipPress — This property is used to define a set of code that you can perform when the Skip Button is pressed.
  • > onNextPress — This property is used to define a set of code that you can perform when the Next Button is pressed.
  • > onDonePress — This property is used to define a set of code that you can perform when the Done Button is pressed.
  • > rendrSkipBtn — This property is utilized to take a custom widget that we need to show instead of the Skip Button.
  • > renderNextBtn — This property is utilized to take a custom widget that we want to display in place of the Next Button.
  • > colorDot — This property is utilized to color for dots when passive.

Slide Widget Properties:

There are some properties of Slide are:

  • > title — This property is utilized to take the top title for each Slide.
  • > pathImage — This property is utilized to provide the image path for the Slide.
  • > background color — This property is utilized to specify the background color for the Slide.
  • > widgetTitle — This property is utilized to on-null, used instead of [title] and its relevant properties.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
flutter:
sdk: flutter
intro_slider:

Step 2: Add the assets

Add assets to pubspec — yaml file.

assets:
- assets/

Step 3: Import

import 'package:intro_slider/intro_slider.dart';

Step 4: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In the main .dart file. We will create a list of <Slide> slides equal to the array bracket.

List<Slide> slides = [];

In the build method, we will return an IntroSlider method. In this method, we will create slides equal to the slides variable and also add colorActiveDot was white.

@override
Widget build(BuildContext context) {
return IntroSlider(
slides: slides,
colorActiveDot: Colors.white,
);
}

We will also create an initState() method. We will add three slides with title, description, pathImage, widthImage, and backgroundColor in our initState.

@override
void initState() {
super.initState();
slides.add(
Slide(
title: "Management",
description:
'Management is the administration of an organization, whether it is a business,'
' a non-profit organization, or a government body. ',
pathImage: "assets/onboarding0.png",
pathImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff4266AC),
),
);
slides.add(
Slide(
title: "Chat",
description:
"Chat refers to the process of communicating, interacting and/or exchanging messages over the Internet. "
"It involves two or more individuals that communicate through a chat-enabled service or software. ",
pathImage: "assets/onboarding1.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff3852B2),
),
);
slides.add(
Slide(
title: "Leadership",
description:
"Leadership is the ability of an individual or a group of individuals to influence and guide followers or other members of an organization. ",
pathImage: "assets/onboarding2.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff2A78E6),
),
);
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Final Output

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_intro_slider_demo/splash_screen.dart';
import 'package:intro_slider/intro_slider.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}

class IntroSliderDemo extends StatefulWidget {
const IntroSliderDemo({Key? key}) : super(key: key);

@override
_IntroSliderDemoState createState() => _IntroSliderDemoState();
}

class _IntroSliderDemoState extends State<IntroSliderDemo> {
List<Slide> slides = [];

@override
Widget build(BuildContext context) {
return IntroSlider(
slides: slides,
colorActiveDot: Colors.white,
);
}

@override
void initState() {
super.initState();
slides.add(
Slide(
title: "Management",
description:
'Management is the administration of an organization, whether it is a business,'
' a non-profit organization, or a government body. ',
pathImage: "assets/onboarding0.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff4266AC),
),
);
slides.add(
Slide(
title: "Chat",
description:
"Chat refers to the process of communicating, interacting and/or exchanging messages over the Internet. "
"It involves two or more individuals that communicate through a chat-enabled service or software. ",
pathImage: "assets/onboarding1.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff3852B2),
),
);
slides.add(
Slide(
title: "Leadership",
description:
"Leadership is the ability of an individual or a group of individuals to influence and guide followers or other members of an organization. ",
pathImage: "assets/onboarding2.png",
heightImage: 370,
widthImage: 400,
backgroundColor: const Color(0xff2A78E6),
),
);
}
}

Conclusion:

In the article, I have explained the Intro Slider basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Intro Slider On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Intro Slider in your flutter projectsWe will show you what is Introduction?. Make a demo program for creating a beautiful onboarding using the intro_slider 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 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 FacebookGitHubTwitter, 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.


Singletons In Flutter

0

In object-oriented programming, a singleton class is a class that can have just a single item (an occurrence of the class) at a time. After the initial occasion when we attempt to start up the Singleton class, the new variable likewise focuses on the primary instance made. So anything changes we do to any variable inside the class through any instance influences the variable of the single instance made and is apparent assuming we access that variable through any variable of that class type characterized.

In this blog, we will explore the Singletons In Flutter. We will see how to implement a demo program and we are going to learn about how we can to use it in your flutter applications.

Table Of Contents::

What Is a Singleton?

How To Implement a Singleton In Dart:

Singleton Examples In Flutter

Singleton Drawbacks

Conclusion



What Is a Singleton?

Singleton is a creational design pattern that guarantees that a class has just a single instance and gives a global point of access to it. Now and then a class must have precisely one instance, or you could compel your application into a weird state.

In other words, the singleton design is a software design pattern that limits the instantiation of a class to one “single” instance.

The singleton pattern tackles issues by permitting it to:

  • > Ensure that a class only has one instance
  • > Easily access the sole instance of a class
  • > Control its instantiation
  • > Restrict the number of instances
  • > Access a global variable

Singleton is viewed as one of the most straightforward plan designs yet it is additionally a simple one to misunderstand if you don’t watch out. A few classes must have precisely one instance. Even though there can be numerous printers in a framework, there ought to be just a single printer spooler. There ought to be just a single file system and one window manager.

How To Implement a Singleton In Dart:

By making the constructor private, we guarantee that the class can’t be started up external the file where it is characterized. What’s more, thus, the best way to get to it is to call SingletonDemo.instance in our code.

class SingletonDemo {
/// private constructor
SingletonDemo._();
/// the one and only instance of this singleton
static final instance = SingletonDemo._();
}

At times, it’s desirable over-utilize a static getter variable.

Singleton Examples In Flutter:

Assuming that you utilized Firebase previously, you’ll know all about this code, that can be utilized to sign in when a button is squeezed:

ElevatedButton(
// access FirebaseAuth as a singleton and call one of its methods
onPressed: () => FirebaseAuth.instance.signInAnonymously(),
child: Text('Sign In'),

The singleton design is utilized by all the Firebase plugins. Also, the best way to call their techniques is with the instance getter:

FirebaseFirestore.instance.doc('path/to/document');
FirebaseFunctions.instance.httpsCallable('createOrder');
FirebaseMessaging.instance.deleteToken();

If the official Firebase modules are carried out as singletons, certainly planning your classes similarly, right is alright?

> One Instance Only:

You see, these classes were planned as singletons to keep you from making more than one instance in your code:

final auth1 = FirebaseAuth();
final auth2 = FirebaseAuth();

The code above will not compile. What’s more, it shouldn’t, on the grounds that you have just a single authentication service, going about as a solitary source of truth:

final auth1 = FirebaseAuth.instance;
final auth2 = FirebaseAuth.instance;

This is an exceptionally honorable objective, and singletons are much of the time a sensible answer for a library or package plan. In any case, while composing application code, we ought to be extremely cautious about how we use them, as they can prompt numerous issues in our codebase.

Flutter applications have profoundly nested widget trees. Subsequently, singletons make it simple to get to the objects we want, from any widget. However, singletons have numerous drawbacks and there are better choices that are still simple to utilize.

Singleton Drawbacks:

To all the more likely to comprehend the reason why singletons are hazardous, here’s a list of normal drawbacks, alongside potential solutions.

> Singletons are hard to test:

Utilizing singletons makes your code hard to test. Think about this model:

class FirebaseAuthRepository {
Future<void> signOut() => FirebaseAuth.instance.signOut();
}

In this case, it’s impossible to write a test to check that FirebaseAuth.instance.signOut() is called:

test('calls signOut', () async {
final authRepository = FirebaseAuthRepository();
await authRepository.signOut();
});

A basic arrangement is to inject FirebaseAuth as a dependency, similar to this:

class FirebaseAuthRepository {
const FirebaseAuthRepository(this._auth);
final FirebaseAuth _auth;
Future<void> signOut() => _auth.signOut();
}

Subsequently, we can without much of a stretch mock the dependency in our test and compose assumptions against it:

import 'package:mocktail/mocktail.dart';
class MockFirebaseAuth extends Mock implements FirebaseAuth {}
test('calls signOut', () async {
final mock = MockFirebaseAuth();
when(mock.signOut).thenAnswer((_) => Future.value());
final authRepository = FirebaseAuthRepository(mock);
await authRepository.signOut();
expect(mock.signOut).called(1);
});

> Singletons are Implicit Dependencies:

Let’s recall the previous example:

class FirebaseAuthRepository {
Future<void> signOut() => FirebaseAuth.instance.signOut();
}

For this situation, it’s not difficult to see that FirebaseAuthRepository relies upon FirebaseAuth.But when we have classes with a couple of dozen lines of code, it turns out to be a lot harder to detect the singletons.

Then again, dependencies are much more straightforward to see when they are passed as express constructor contentions:

class FirebaseAuthRepository {
const FirebaseAuthRepository(this._auth);
final FirebaseAuth _auth;
Future<void> signOut() => _auth.signOut();
}

> Lazy Initialization:

Introducing specific objects can be costly:

class Company {
Company._() {
print('when started');
}
static final instance = Company._();
}
void main() {
final company = Company.instance;
}

In the model above, all the weighty handling code runs when we initialize the company variable inside the main() technique. In such cases, we can utilize late to concede the object initialization until some other time.

void main() {
late final company = Company.instance;
...
company.logResult();
}

In any case, this approach is error-prone as it’s too simple to even think about forgetting to utilize late.

Note: In Dart, all global variables are lazy-loaded naturally. This implies that they are possibly initialized when they are first utilized. Then again, local variables are initialized when they are proclaimed, except if they are announced as late.

As another option, we can utilize packages, for example, get_it, which makes it simple to enroll a lazy singleton:

class Company {
Company() {
}
}
getIt.registerLazySingleton<Company>(() => Company());
final Company = getIt.get<Company>();

What’s more, we can do likewise with Riverpod, since all providers are lazy by defualt:

final companyProvider = Provider<Company>((ref) {
return Company();
});
final company = ref.read(companyProvider);

Thus, the object we want might be made when we first use it.

> Instance Lifecycle:

At the point when we introduce a singleton instance, it will stay alive until the end of time. Furthermore, if the instance consumes a great deal of memory or keeps an open organization association, we can’t deliver it early if we need to.

Then again, packages like get_it and Riverpod give us more command over when a specific occurrence is disposed. Riverpod is very shrewd and allows us effectively to control the lifecycle of the condition of a provider.

For instance, we can utilize the autoDispose modifier to guarantee our Company is disposed of when the last listener is taken out:

final companyProvider = Provider.autoDispose<Company>((ref) {
return
Company();
});

This is most valuable when we need to dispose of an object when the widget that was utilizing it is unmounted.

> Thread Safety:

In multi-threaded languages, we should be cautious about getting to singletons across various threads, and some synchronization components might be essential on the off chance that they share mutable information.

But in Dart, this is usually not a concern because all application code inside a Flutter app belongs to the main isolate. Though if we end up creating separate isolates to perform some heavy computations, we need to be more careful:

Yet, in Dart, this is typically not a worry since all application code inside a Flutter application has a place with the main isolate. However, on the off chance that we wind up making separate isolates to play out a few weighty computations, we should be more cautious.

Conclusion:

In the article, I have explained Singleton’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Singletons On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Singletons in your flutter projectsWe will show you what the Singletons are. Singletons make it simple to get to dependencies in your code. Yet, they make a larger number of issues than they settle. Make a demo program for working Singletons 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 a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

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.


Factory Design Patterns For Dart and Flutter

0

The Factory Method design, some of the time alluded to as the Virtual Constructor design, gives a method for covering an item’s creation rationale from client code, however, the item returned is ensured to stick to a known connection point. It’s one of the most broadly utilized creational designs since it adds a ton of adaptability to your article creation architecture without adding a lot of intricacies.

In this article, we’ll explore Factory Design Patterns For Dart and Flutter. We will perceive how to execute a demo program. Classic Factory Method model appearance how to deftly deliver objects addressing different shapes, then we’ll investigate how you can involve the example to make UI components for various stages in Flutter without any problem.

Table Of Contents ::

Classic Factory Method Model

Using Factory Method In Flutter

The Abstract Factory Method Pattern

Conclusion



Classic Factory Method Model:

Let’s begin with an excessively shortsighted, yet exemplary, model that will assist with making the Factory Method example’s structure understood. We’ll make a shape factory that supports creating a circle or a square shape. The accompanying chart outlines the essential components and connections:

The Shape class will go about as the factory and the connection point for the model, while Circle and Square are instances of substantial results of the production factory. The items execute the implement factory’s point of interaction, giving substantial executions of the draw() strategy.

How about we find out what it resembles as Dart code:

enum ShapeType {
circle,
square
}

abstract class Shape {
factory Shape(ShapeType type) {
switch (type) {
case ShapeType.circle: return Circle();
case ShapeType.square: return Square();
default: return null;
}
}

void draw();
}

class Circle implements Shape {
@override
void draw() {
print("Circle");
}
}

class Square implements Shape {
@override
void draw() {
print("Square");
}
}

Next comes the item factory, which for this situation appears as an abstract class called Shape. The shape has a factory constructor that goes about as the factory strategy for this example. It’s liable for making shapes of the mentioned type. The class is marked abstractconceptual to deny direct launch of Shape since the class has no execution for the draw() technique.

A switch proclamation is used to return the fitting substantial shape, returning null on the off chance that an invalid kind is passed in. The class closes with an unimplemented statement of a draw() strategy, present just to lay out a point of interaction that all shapes should execute.

The Circle and Square classes each carry out the Shape interface by superseding the draw() technique, as demonstrated by the @override metatag, which is discretionary but suggested as a type of self-documentation. The production line strategy in the Shape class can’t return a class that neglects to execute this connection point accurately.

Utilizing the factory could look something like the accompanying:

final shape1 = Shape(ShapeType.circle);
final shape2 = Shape(ShapeType.square);

shape1.draw();
shape2.draw();

Through the enchantment of polymorphism, the right adaptation of draw() for each shape will be called. Both shape1 and shape2 are of type Shape, however, one is a circle and the other is a square. It would be feasible to make a List<Shape> containing a blend of shape types, and the draw() strategy could be required each without the guest having to know every component’s actual kind.

Using Factory Method In Flutter:

One clear use for the Factory Method design in a Flutter application would produce locally styled UI components for various stages. For this model, we’ll make a platform-aware button factory that will return buttons for Android or iOS:

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

abstract class PlatformButton {
factory PlatformButton(TargetPlatform platform) {
switch (platform) {
case TargetPlatform.android: return ShowAndroidButton();
case TargetPlatform.iOS: return ShowIosButton();
default: return null;
}
}

Widget build({
@required BuildContext context,
@required Widget child,
@required VoidCallback onPressed
});
}

As in the shapes model from the earlier segment, we make an abstract class to house the production line strategy. The industrial facility constructor of PlatformButton will return a case of a class that executes PlatformButton in light of the worth of its platform parameter.

The switch proclamation accomplishes crafted by returning a button example that matches the caller’s inclination. Note that ShowAndroidButton and ShowIosButton haven’t yet been made.

PlatformButton likewise incorporates an unimplemented statement for a build() strategy to lay out an assumption that practitioners will supersede it with a viable mark. The build() strategy takes the boundaries expected by the stage explicit button widgets.

Here are the implementations for ShowAndroidButton and ShowIosButton:

class ShowAndroidButton implements PlatformButton {
@override
Widget build({
@required BuildContext context,
@required Widget child,
@required VoidCallback onPressed
}) {
return FlatButton(
child: child,
onPressed: onPressed,
);
}
}

class
ShowIosButton implements PlatformButton {
@override
Widget build({
@required BuildContext context,
@required Widget child,
@required VoidCallback onPressed
}) {
return CupertinoButton(
child: child,
onPressed: onPressed,
);
}
}

ShowAndroidButton and ShowIosButton carry out the connection point laid out by PlatformButton, and each class build() technique returns a button widget styled by those separate platforms. The child and onPressed arguments are given to those widgets.

Some place in the application, a PlatformButton factory line can be made this way:

PlatformButton(TargetPlatform.android)

Or on the other hand more probable, the stage would be distinguished powerfully by utilizing a Flutter Theme:

PlatformButton(Theme.of(context).platform)

Along these lines, every one of the buttons for an application could be consequently delivered in the style of the host stage, and the application’s build methods won’t be jumbled up by excess stage identification code.

What’s more, to build a button, you’ll have to call the build() strategy:

PlatformButton(Theme.of(context).platform).build(
context: context,
child: Text('My Button'),
onPressed: () => print('Button pressed!'),
)

With just somewhat more code than a typical button launch, you can have a button utilizing Android’s Material Design style or one that utilizes the iOS look and feel, given the stage your Flutter application is executing on.

The Abstract Factory Method Pattern:

The Abstract Factory Method design is a superset of the Factory Method design. All things considered, a focal production line class handles those subtleties imperceptibly. The client need just give the sort of object required, and the abstract industrial factory figures out which object factory to start up, then it returns the proper item.

This extended model will uphold the production of various stage explicit UI widgets, so we’ll utilize the PlatformButton, ShowAndroidButton, and ShowIosButton classes from the Factory Method design model, and we’ll add equivalent help for switch widgets:

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

abstract class PlatformSwitch {
factory PlatformSwitch(TargetPlatform platform) {
switch (platform) {
case TargetPlatform.android: return ShowAndroidSwitch();
case TargetPlatform.iOS: return ShowIosSwitch();
default: return null;
}
}

Widget build({
@required BuildContext context,
@required value,
@required ValueChanged<bool> onChanged
});
}

This code scrap will look recognizable to you if you’ve investigated the button creation code from the Factory Method design model. PlatformSwitch performs indistinguishably from PlatformButton, yet with switches.

Then, we really want classes for the two unique switches we’ll uphold. These are practically equivalent to their button partners from the Factory Method design model, with a couple of parameters adjusted:

class ShowAndroidSwitch implements PlatformSwitch {
@override
Widget build({
@required BuildContext context,
@required value,
@required ValueChanged<bool> onChanged
}) {

PlatformButton(Theme.of(context).platform);
return Switch(
value: value,
onChanged: onChanged,
);
}
}

class ShowIosSwitch implements PlatformSwitch {
@override
Widget build({
@required BuildContext context,
@required value,
@required ValueChanged<bool> onChanged
}) {
return CupertinoSwitch(
value: value,
onChanged: onChanged,
);
}
}

Since we have factories for two UI controls set up, we can build an abstract factory class to deal with making the right version of every widget from a central widget factory:

class WidgetFactory {
static Widget buildButton({
@required BuildContext context,
@required Widget child,
@required VoidCallback onPressed
}) {
return PlatformButton(Theme.of(context).platform).build(
context: context,
child: child,
onPressed: onPressed,
);
}

static Widget buildSwitch({
@required BuildContext context,
@required value,
@required ValueChanged<bool> onChanged
}) {
return PlatformSwitch(Theme.of(context).platform).build(
context: context,
value: value,
onChanged: onChanged,
);
}
}

We make all the WidgetFactory strategies static to stay away from the need to start up it. With it, you can fabricate a button or a switch widget, and for each situation, you’ll get the rendition compared to the stage your application is running on. Luckily, WidgetFactory can decide the stage utilizing the BuildContext, so the client code doesn’t need to give it a different boundary.

The buildButton() technique utilizes the button production line class, PlatformButton, to make either an Android or iOS button, then, at that point, sends that button back to the caller. The buildSwitch() technique does likewise for switches. More techniques can be added to help with different controls.

To utilize the WidgetFactory, simply call one of the build techniques:

WidgetFactory.buildSwitch(
context: context,
value: myValue,
onChanged: (bool value) => print(value),
)

As may be obvious, the Abstract Factory Method design enjoys a couple of upper hands over the Factory Method design. There’s somewhat more standard included, however, the client code is more limited and doesn’t have to expressly pass the stage identifier, since that can be recognized through the context.

Conclusion:

In the article, I have explained the basic structure of Factory Design Patterns For Dart and Flutter; you can modify this code according to your choice. This was a small introduction to Factory Design Patterns For Dart and Flutter On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Factory Design Patterns For Dart and Flutter in your projectsSo 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 a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on FacebookGitHubTwitter, and LinkedIn.

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.