after_layout 1.0.4

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 96

Flutter After Layout

pub package

Brings functionality to execute code after the first layout of a widget has been performed, i.e. after the first frame has been displayed.

Quick Usage

Add with AfterLayoutMixin<MyWidget> mixin to your State<MyWidget> class and then implement the void afterFirstLayout(BuildContext context) abstract method. Code in this method will be called the first time this widget is laid out on the screen.

Motivation

If you want to display a widget that depends on the layout, such as a Dialog or BottomSheet, you can not use that widget in initState.

You might have tried this.

BAD CODE

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'After Layout - Bad Example',
      home: new HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    // NOTE: Calling this function here would crash the app.
    showHelloWorld();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(body: new Container(color: Colors.red));
  }

  void showHelloWorld() {
    showDialog(
      context: context,
      builder: (context) => new AlertDialog(
            content: new Text('Hello World'),
            actions: <Widget>[
              new FlatButton(
                child: new Text('DISMISS'),
                onPressed: () => Navigator.of(context).pop(),
              )
            ],
          ),
    );
  }
}

Usage

This demo showcases how this package resolves the shortcomings shown above:

GOOD CODE

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'After Layout - Good Example',
      home: new HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> with AfterLayoutMixin<HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(body: new Container(color: Colors.red));
  }

  @override
  void afterFirstLayout(BuildContext context) {
    // Calling the same function "after layout" to resolve the issue.
    showHelloWorld();
  }

  void showHelloWorld() {
    showDialog(
      context: context,
      builder: (context) => new AlertDialog(
            content: new Text('Hello World'),
            actions: <Widget>[
              new FlatButton(
                child: new Text('DISMISS'),
                onPressed: () => Navigator.of(context).pop(),
              )
            ],
          ),
    );
  }
}

Changelog

1.0.4

  • Added Flutter Community Logo.

1.0.3

1.0.2

  • Renamed AfterLayout class to AfterLayoutMixin class and improved docs.

1.0.1

  • Updated project using analyze and format and added example to improve pub score

1.0.0

  • Initial version release
  • Release ready, very basic functionality
  • Contains tests

example/example.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'After Layout - Good Example',
      home: new HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> with AfterLayoutMixin<HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(body: new Container(color: Colors.red));
  }

  @override
  void afterFirstLayout(BuildContext context) {
    // Calling the same function "after layout" to resolve the issue.
    showHelloWorld();
  }

  void showHelloWorld() {
    showDialog(
      context: context,
      builder: (context) => new AlertDialog(
            content: new Text('Hello World'),
            actions: <Widget>[
              new FlatButton(
                child: new Text('DISMISS'),
                onPressed: () => Navigator.of(context).pop(),
              )
            ],
          ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  after_layout: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:after_layout/after_layout.dart';
  
Version Uploaded Documentation Archive
1.0.4 Jun 19, 2018 Go to the documentation of after_layout 1.0.4 Download after_layout 1.0.4 archive
1.0.3 Jun 19, 2018 Go to the documentation of after_layout 1.0.3 Download after_layout 1.0.3 archive
1.0.2 Apr 27, 2018 Go to the documentation of after_layout 1.0.2 Download after_layout 1.0.2 archive
1.0.1 Apr 27, 2018 Go to the documentation of after_layout 1.0.1 Download after_layout 1.0.1 archive
1.0.0 Apr 27, 2018 Go to the documentation of after_layout 1.0.0 Download after_layout 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
91
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Sep 18, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.3
  • Flutter: 0.8.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test