Skip to main content

Managing State in Flutter: A Guide to State Management with MVVM Architecture.

In this blog post, we'll explore efficient state management in Flutter applications using ValueNotifier and EfficientBuilder within the MVVM (Model-View-ViewModel) architectural pattern. The MVVM architecture consists of three key components: Model: Represents the data and business logic View: Handles the UI presentation ViewModel: Manages state and business logic between Model and View In our approach, we’ll be refining the ViewModel by separating its states into a dedicated State class. This ensures that the ViewModel focuses solely on managing logic while the State class handles state representation. Traditionally, in MVVM, the ViewModel is responsible for both state management and business logic. However, by decoupling these concerns, we create a more structured and maintainable architecture. No more talking. Lets, implement it together. 1. Efficient Builder: We are going to use Efficient Builder package for this. So, go to pub.dev. Add the package to you pubspec.yaml file...

ListView Builder!

ListView.builder is a versatile Flutter widget that allows you to create scrollable lists efficiently, especially when dealing with large or dynamic lists. Unlike a traditional ListView, where you provide a fixed list of children, ListView.builder generates list items on-demand as the user scrolls, which can help save memory and improve performance.


When we have to to deal with large amount of dynamically changing data or we have fetch data from the database, we have to use a ListView.builder widget. 

The main difference between ListView and ListView.builder is one work with fixed data and other work with generated list items on-demand as the user scrolls, which can help save memory and improve performance.

ListView.builder widget has some additional parameters, which are:
  • itemCount, is set to the length of the data source (myList), indicating the total number of items to be displayed.
  • itemBuilder, defines how each list item is constructed. It receives an index, which is used to access the corresponding item in the data source.
class home extends StatelessWidget {
home({super.key});

List<String> Sub = ["CSE","EEE","CIVIL"];
List<String> FullN = ["Computer Science","Electric Engineering","Civil Engineering"];
List<int> Price =[320000,350000,470000];


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Listview Builder",
style: TextStyle(fontWeight: FontWeight.bold),
),
centerTitle: true,
backgroundColor: Colors.deepOrange,
),
body: Container(
child: ListView.builder(
itemCount: Sub.length,
itemExtent: 65,
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(child: Text(Sub[index][0]),),
title: Text(Sub[index]),
subtitle: Text(FullN[index]),
trailing: Text(Price[index].toString() + "/-"),
);
}),
),
);
}
}

Comments

Popular posts from this blog

Understanding BuildContext in Flutter!

As a Flutter developer, you might have encountered the term BuildContext early in your journey. Despite its importance, many developers struggle to grasp its full significance. Today, we’re going to dive into what BuildContext is, what it does, and why it’s crucial for running your Flutter app. What is BuildContext In both stateless and stateful widgets, when you override the build method, it takes BuildContext context as a parameter. This context is provided by the Flutter framework. Here’s a simple example to illustrate: Widget build(BuildContext context) { return OutlinedButton( onPressed: () async { await Future< void >.delayed( const Duration(seconds: 1 )); if (context.mounted) { Navigator.of(context).pop(); } }, child: const Text( 'Delayed pop' ), ); } BuildContext do a simple task, track all of your widget location. In flutter, it all about widgets. Everything is build on a collection of widgets. Some widgets are parent w...

Impeller: Elevating Flutter Performance with Predictable Rendering

In the world of Flutter, Impeller is a buzzword that has caught the attention of developers and enthusiasts alike. But what exactly is Impeller, and why is it crucial for Flutter apps? Let’s dive into the details. What is Impeller? Impeller is a new rendering engine for flutter. Now, many of you can think. What is a rendering engine. Rendering engine is nothing but a piece of software responsible for converting input instructions or data into visual or audible output. Basically , it helps us to draw UI of an app according to the instruction you give it. Flutter engine is written is C/C++language. Which is the part of dart UI. Rendering engine in Flutter orchestrates the transformation from widget tree to pixels on the screen. Before Impeller flutter used skia as a default graphics engine. But, there was some issues on it. Challenges with Skia: Skia has been the graphic engine for Flutter since its inception. Skia is also a powerful render engine, which powers various platforms, inc...

Managing State in Flutter: A Guide to State Management with MVVM Architecture.

In this blog post, we'll explore efficient state management in Flutter applications using ValueNotifier and EfficientBuilder within the MVVM (Model-View-ViewModel) architectural pattern. The MVVM architecture consists of three key components: Model: Represents the data and business logic View: Handles the UI presentation ViewModel: Manages state and business logic between Model and View In our approach, we’ll be refining the ViewModel by separating its states into a dedicated State class. This ensures that the ViewModel focuses solely on managing logic while the State class handles state representation. Traditionally, in MVVM, the ViewModel is responsible for both state management and business logic. However, by decoupling these concerns, we create a more structured and maintainable architecture. No more talking. Lets, implement it together. 1. Efficient Builder: We are going to use Efficient Builder package for this. So, go to pub.dev. Add the package to you pubspec.yaml file...