flutter: how to show SnackBar after page load?

Question

flutter: how to show SnackBar after page load?

return MaterialApp(
  title: 'SnackBar Demo',
  home: Scaffold(
    appBar: AppBar(
      title: const Text('SnackBar Demo'),
    ),
    body: HomePage(),
  ),
);


SnackBar snackBar = SnackBar(content: Text("Order not found: $orderId'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);

Trying to show a message after page is loaded from server, not inside an action handler like

 onpress() {
   // show SnackBar: works here
 }.

On web, we can execute a script on page load.

Answer 1

To show a SnackBar after a page load in Flutter, you can use the addPostFrameCallback method of WidgetsBinding.instance. This method allows you to schedule a callback for the end of this frame, when the build is complete.

WidgetsBinding.instance!.addPostFrameCallback((_) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text("Hello")));
    });

Example :

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text("Hello")));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My Page')),
      body: Center(child: Text('Hello, World!')),
    );
  }
}