How to pass context of Scaffold to some function in flutter?

Question

I want to show Snackbar using the floating action button but I am not able to pass the context of scaffold as parameter to call the local function in onPressed argument.

Is there any way to show the scaffold using floating action button?

void main() {
BuildContext context;
  runApp(
    MaterialApp(
      title: "Exploring UI Widgets",
      home: Scaffold(
        appBar: AppBar(
          title: Text("My App")
        ),
     floatingActionButton: FloatingActionButton(
       child: Icon(Icons.add),
       onPressed: (){
       //  showSnackBar(/*Here*/);
       },
       tooltip: "Floating Button",
     ),
      )
    )
  );
}

void showSnackBar(BuildContext context){
  var snackbar = SnackBar(
      content: Text("You just tapped Floating Button & This is Snakbar"),
      action: SnackBarAction(
        label: "Button",
        onPressed: (){
          //Blank Anonymous/ Lambda Function
        }
      )

  );
ScaffoldMessenger.of(context).showSnackBar(snackbar);

}

score 1 · Accepted Answer · answered Jun 05 '22 at 09:56

Directly using ScaffoldMessenger inside MaterialApp will show context issue. Separate the home part.

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'List Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage());
  }
}


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

  showMySnackBar(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("data")));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("My App")),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          showMySnackBar(context);
        },
        tooltip: "Floating Button",
      ),
    );
  }
}

score 0 · Answer 2 · answered Jun 05 '22 at 10:00

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(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          showSnackBar(context);
        },
        tooltip: "Floating Button",
      ),
    );
  }
}

void showSnackBar(BuildContext context) {
  var snackbar = SnackBar(
      content: const Text("You just tapped Floating Button & This is Snakbar"),
      action: SnackBarAction(
          label: "Button",
          onPressed: () {
            //Blank Anonymous/ Lambda Function
          }));
  ScaffoldMessenger.of(context).showSnackBar(snackbar);
}

How to pass context of Scaffold to some function in flutter?

2 Answers2