How to perform an action after first frame in flutter

Sometimes, you might need to perform an action after the app’s first frame. Maybe, you want the Bottom Navbar to pop up immediately after the first frame. This is an example on how to handle just that.

Import the after_layout package from pub.


after_layout: any

Create a new dart file and add this:

import 'package:after_layout/after_layout.dart';
import 'package:flutter/material.dart';

class ActionAfterFirstFrame extends StatefulWidget {
  _ActionAfterFirstFrameState createState() => _ActionAfterFirstFrameState();

class _ActionAfterFirstFrameState extends State<ActionAfterFirstFrame>
    with AfterLayoutMixin<ActionAfterFirstFrame> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Action after frist Frame Example')),
      body: Center(child: Text('')),

  void afterFirstLayout(BuildContext context) {

  void _showMyDialog() {
        context: context,
        builder: (context) => new AlertDialog(
              content: Text(''),
              actions: <Widget>[
                new FlatButton(
                  child: Text('Dismiss'),
                  onPressed: () => Navigator.of(context).pop(),

Your main.dart:

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Code Snippets',
      theme: new ThemeData(primarySwatch:,
      home: new ActionAfterFirstFrame(),

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

50% Discounts On Projects

Do you have a custom project with a clear requirements, we are currently giving a 50% discount on all projects.

We will work with you to ensure we deliver what you need.

If you have questions or want to chat with us, you can reach us on Skype (henry.tochi)

Languages and technologies we use - Java, Kotlin, Laravel, Vue, React, Flutter, Swift and more.