https://github.com/fluttercommunity/flutter_after_layout
Flutter After Layout - Brings functionality to execute code after the first layout of a widget has been performed, i.e. after the first frame has been displayed. Maintainer: @slightfoot
https://github.com/fluttercommunity/flutter_after_layout
Last synced: about 1 year ago
JSON representation
Flutter After Layout - Brings functionality to execute code after the first layout of a widget has been performed, i.e. after the first frame has been displayed. Maintainer: @slightfoot
- Host: GitHub
- URL: https://github.com/fluttercommunity/flutter_after_layout
- Owner: fluttercommunity
- License: mit
- Created: 2018-04-27T00:47:01.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-05-16T00:59:36.000Z (about 4 years ago)
- Last Synced: 2025-04-04T01:24:10.959Z (about 1 year ago)
- Language: Dart
- Homepage: https://pub.dev/packages/after_layout
- Size: 28.3 KB
- Stars: 477
- Watchers: 7
- Forks: 38
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/fluttercommunity/community)
# Flutter After Layout
[](https://pub.dartlang.org/packages/after_layout)
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` mixin to your `State` class and then implement the `FutureOr 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**
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
@immutable
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'After Layout - Good Example',
home: HomeScreen(),
);
}
}
@immutable
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
HomeScreenState createState() => HomeScreenState();
}
class HomeScreenState extends State {
@override
void initState() {
super.initState();
// NOTE: Calling this function here would crash the app.
showHelloWorld();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(color: Colors.red),
);
}
void showHelloWorld() {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: const Text('Hello World'),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('DISMISS'),
)
],
);
},
);
}
}
```
## Usage
This demo showcases how this package resolves the shortcomings shown above:
**GOOD CODE**
```dart
import 'package:flutter/material.dart';
import 'package:after_layout/after_layout.dart';
void main() => runApp(const MyApp());
@immutable
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'After Layout - Good Example',
home: HomeScreen(),
);
}
}
@immutable
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
HomeScreenState createState() => HomeScreenState();
}
class HomeScreenState extends State with AfterLayoutMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
body: 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: (BuildContext context) {
return AlertDialog(
content: const Text('Hello World'),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('DISMISS'),
)
],
);
},
);
}
}
```