![]() Open the generated project with your preferred text editor and you should see a main.dart file like so. Where is the name of your project, in my case its navigation_demo. To do this we could use the terminal to run the following command. To get started, let’s create a simple flutter project. So we’re going to get our hands dirty with some code. This is achieved with the help of the Navigator object, a simple widget that maintains a stack of routes, or a history of visited pages. Many tools and frameworks today have some provision for implementing navigation built-in.įlutter makes the concept of navigation stress-free and easy to implement. We want to achieve a logical flow from screen to screen when some button is tapped or in response to some other event, bringing about a seamless user experience. Many apps contain several screens for displaying some form of information, for example, an app might have several onboarding screens for first-time users or a list of posts screen and a posts detail screen. Navigation is the process of switching from one distinct screen/page to another. It’s going to be quite a ride, so fasten your seatbelts. This is followed by another Row containing two Containers inside each having cyan color, a height of 300, and a width of 180.In this article, we’ll be talking about the navigation in flutter. The color is set to blue and the border-radius to 10. Next is a Container outside the Row with a width of 380 and a height of 200. The Containers are given a height and width of 175 each and with the help of decoration property the color is set to red and the border-radius to 10. In that list, the first widget is a Row which is having two Containers and a SizedBox inside it. After that, we have a Column widget which is taking a list of widgets as children. In the body of the app, the parent widget is Center followed by Container and Padding. The background color of the app bar is greenAccent and the icon is having a tooltip saying ‘menu’. It decides the size of the child widget along the main-axis (for Row it is horizontal and vertical for Column) with respect to other children widgets.Įxplanation: Taking a look at the code we can see that at the top of the screen we have a basic app bar build with AppBar widget containing a leading menu IconButton inside.
0 Comments
Leave a Reply. |