The “context” issue in Flutter

 

It’s been about 8 months since I started working with Flutter, I can say that I didn’t have much difficulty in understanding the general writing principles and widget tree.

The reason why I preferred Flutter was that it is becoming increasingly popular and can be output on different platforms with the same code. Indeed, I was able to develop tiny applications in a short time and this motivated me even more.

But there is a context issue that I have to say that I used it by heart at first :) Fortunately, as I worked on it and used it in different applications and widget structures, I understood its logic and decided to write about it first because I thought that there might be people like me who have difficulties.

What is context?

The first thing we need to know about context is that it is present in the widget tree in our application and it is a context as in the dictionary sense. Within this context, it controls the current state, location and interaction with other widgets. In simpler terms, it refers to the context in which a widget exists.

What is BuildContext?

In order to better understand what a context is, it is very important to understand the BuildContext class it depends on.

BuildContext points to a point in the widget tree. This point contains the widget’s location, theme information and other context information. We use this structure to share information and state between widgets, use navigator methods, access theme information, and so on. This makes our application more modular, flexible and maintainable.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

The code above is the first code that is automatically generated for us when creating a project in Flutter. Here we see that BuildContext is used as the parameter of the build method. Here “context” represents the context information from the place that calls this method.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Example of BuildContext'),
    ),
    body: Center(
      child: ElevatedButton(
        onPressed: () {
          // 'context' can be used here
          showSnackBar(context);
        },
        child: Text('Show Snackbar'),
      ),
    ),
  );
}

In this example, we show a snackbar using BuildContext. By passing the context to the showSnackBar method, we make the method use the current context in the widget tree.

Therefore, SnackBar detects where it is located in the widget tree, what its context is, where it is triggered from, and behaves accordingly. So shoxSnackBar gets its context from the context of the build method. That context, this context :).

As a result, making our Flutter application more sustainable and flexible depends on proper communication between widgets and we can use this very easily with the BuildContext structure.

I hope I was able to clear up some of the confusion and helped you a little bit.

Thank you.

Selin.