We start off with the basic template here
Its UI for food delivery.
Notice that it has the main.dart, and the models.
Let’s make the basic changes of changing some colors. We then remove the default MyHomePage class and change the instance to HomeScreen.
We then create a new folder screens under lib, with home_screen.dart
In the home_screen.dart file, stf + tab and type in HomeScreen. Remember to import Material.dart.
Instead of the default Container, we use Scaffold to take advantage of Material design.
We create an instance of the AppBar and assign it to property appBar. Then under title, put ‘food delivery’.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Food Delivery'), ), ); } } |
Hot reload should show something like:
We then use property actions. It is a List of Widgets. Thus, we create an array of type Widget.
We then insert a TextButton in there. It will represent the Cart button.We then specify the leading button as an IconButton.
home_screen.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Food Delivery'), actions: <Widget>[ TextButton( onPressed: () {}, child: Text('Cart (0)'), style: ButtonStyle( foregroundColor: MaterialStateProperty.all(Colors.white)), ) ], leading: IconButton( icon: Icon(Icons.account_circle), iconSize: 30, onPressed: () {}), ), ); } } |
