Skip to main content

Observer Pattern: The Hidden Magic Behind Flutter State Management

When I first started learning state management in Flutter, it honestly felt like magic. I'd change one variable, call setState , and the screen would just… update. Later I met ValueNotifier and ValueListenableBuilder , and it got even stranger — now only one widget would rebuild while everything around it stayed perfectly still. I hadn't written any code to watch for changes. I hadn't wired anything up. It just worked. And anything that "just works" without me understanding why makes me a little uncomfortable. So I did what any curious developer does: I went down the rabbit hole. I wanted to know how a value "knows" when to tell the UI to rebuild. Who is listening? How does the change travel from my variable to the pixels on screen? That question led me to something much bigger than Flutter — a classic software design pattern called the Observer pattern . Once I understood it, the magic didn't disappear. It just turned into some...
Post a Comment

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

Post a Comment

Popular posts from this blog

Keep Your Promises: The Liskov Substitution Principle Made Simple

If you're learning clean code, you'll keep running into the "SOLID" principles. The L stands for the Liskov Substitution Principle (LSP) — a scary name for a genuinely simple idea. This guide starts from zero, so no prior knowledge is needed. What it is The Liskov Substitution Principle says: If something is supposed to work like a certain type, then any "version" of that type must be able to take its place without causing problems. That's the whole thing. If you call something a Doctor , it has to actually behave like a doctor everywhere a doctor is expected. If you call something an ApiClient , it has to behave like one everywhere. Break that, and your program fails — usually later, in a confusing way. The principle is named after Barbara Liskov, a computer scientist who described it back in 1987. But you don't need the academic version to use it well. First, what does "substitute" mean? This is the word that makes the whole pr...
Post a Comment
Read more

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...
Post a Comment
Read more

Observer Pattern: The Hidden Magic Behind Flutter State Management

When I first started learning state management in Flutter, it honestly felt like magic. I'd change one variable, call setState , and the screen would just… update. Later I met ValueNotifier and ValueListenableBuilder , and it got even stranger — now only one widget would rebuild while everything around it stayed perfectly still. I hadn't written any code to watch for changes. I hadn't wired anything up. It just worked. And anything that "just works" without me understanding why makes me a little uncomfortable. So I did what any curious developer does: I went down the rabbit hole. I wanted to know how a value "knows" when to tell the UI to rebuild. Who is listening? How does the change travel from my variable to the pixels on screen? That question led me to something much bigger than Flutter — a classic software design pattern called the Observer pattern . Once I understood it, the magic didn't disappear. It just turned into some...
Post a Comment
Read more