Flutter get context in stateless widget

How to get ‘context’ in a stateless widget in Flutter

In a stateless widget, you cannot directly access the ‘context’ object, as it is only available in the build method. However, there are a few workarounds you can use to get the ‘context’ in a stateless widget:

1. Using a Builder Widget

You can use a Builder widget to access the ‘context’. The Builder widget creates a new build context so you can use it within the Builder’s build method. Here’s an example:

  
import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Stateless Widget'),
      ),
      body: Builder(
        builder: (BuildContext builderContext) {
          return Center(
            child: RaisedButton(
              onPressed: () {
                // Access the 'context' within the Builder widget
                Scaffold.of(builderContext).showSnackBar(
                  SnackBar(
                    content: Text('Hello from SnackBar!'),
                  ),
                );
              },
              child: Text('Show SnackBar'),
            ),
          );
        },
      ),
    );
  }
}

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

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

In the above example, the ‘context’ is accessed inside the onPressed callback of the RaisedButton by using the Scaffold.of(builderContext) method.

2. Using the Navigator

If you need the ‘context’ to navigate to another screen or to access route arguments, you can use the Navigator. Here’s an example:

  
import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Stateless Widget'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

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

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

In this example, when the button is pressed on the first screen, the ‘context’ is used to push to the second screen using Navigator.push, and in the second screen, the ‘context’ is used to pop the screen using Navigator.pop.