What if you want to display a SnackBar on particular Scaffolds only. ScaffoldMessenger.of(context).removeCurrentSnackBar( To try the above method, hust add the button below as another child of the Column widget on the PageTwo. As soon as the current SnackBar has been removed, the next one will be shown if the queue is not empty. It also supports the optional reason argument whose default value is remove. import 'package:flutter/material.dart' Ĭlass MyApp extends StatelessWidget build(BuildContext context) ) As the result, a SnackBar triggered from PageOne is also displayed on PageTwo and vice versa. Both pages use the ScaffoldMessenger from the MaterialApp (instead of creating a new one). ScaffoldMessenger.of(context).showSnackBar(_snackBar) īelow is a simple application consisting of two pages: PageOne and PageTwo. After that, you can call the showSnackBar method. That means the passed BuildContext must be below a Scaffold widget in the tree. It returns the state of the nearest instance that encloses the given context. To get the instance of ScaffoldMessengerState, you can use the method below static ScaffoldMessengerState of(BuildContext context) ScaffoldFeatureController showSnackBar(SnackBar snackBar) / This Widget is the main application widget.Content: const Text('Message from page one'),ĭisplaying a Snackbar can be done by calling the showSnackBar method of ScaffoldMessengerState. In this example, we are going to see a Scaffold widget with an AppBar, BottomAppBar, FloatingActionButton, floatingActionButtonLocation, and drawer properties. Let us see the example where we have tried to use most of the Scaffold properties to understand this widget quickly and easily. If we want to learn it in more detail, refer to the flutter documentation here. ![]() Its main purpose is to get familiar with different properties and their usage in Flutter application. ![]() That's all about the Scaffold's various properties that give us an overview of the Scaffold widget. It contains many predefined constants, such as centerDocked, centerFloat, endDocked, endFloat, etc. It is used to determine the position of the floatingActionButton. floatingActionButtonLocation: By default, it is positioned at the bottom right corner of the screen. The bottom property defines the onscreen keyboard height.ġ1. resizeToAvoidBottomInset: If it is true, the body and the Scaffold's floating widgets should adjust their size themselves to avoid the onscreen keyboard. It can be swiped right to left or left to right.ġ0. endDrawer: It is similar to a drawer property, but they are displayed at the right side of the screen by default. We had also used onTap(int itemIndex) function to perform an action when we tapped on the items, which works according to their index position.ĩ. The BottomNavigationBarItems widget is used to add items in the bar containing text and icon as its child property. The fixedColor property is used for the color of the active icon. In the above code, we have used the BottomNavigationBar widget to display the menu bar. See the below code:īottomNavigationBar: BottomNavigationBar( It uses the FloatingActionButton widget properties using Scaffold.floatingActionButton. While scrolling the page, its position cannot be changed. It is a circular icon button that floats over the content of a screen at a fixed place to promote a primary action in the application. floatingActionButton: It is a button displayed at the bottom right corner and floating above the body. Again, we have used ListTile to add the list items in the menu.Ĥ. The DrawerHeader property modifies the panel header that also contains an icon or details according to the application. In the ListView widget, we have divided the panel into two parts, Header and Menu. We have also used some other widgets to make it attractive. In the above code, we use the drawer property of Scaffold for creating a drawer.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |