Scribd
Upload
21 views51 pages

Chapter 3

ch3 flutter

Uploaded by

mohamedaliim61
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views51 pages

Chapter 3

ch3 flutter

Uploaded by

mohamedaliim61
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 51

Chapter 3

Navigation And Routing


Contents
• Button Widgets
• App Structure and Navigator
• Navigate With Named Routes
• Send and Return Data Among Screens
FloatingActionButton Widget
A floating action button is by default a circular icon
button that hovers over content to promote a primary
action in the application. Use at most a single floating
action button per screen. Floating action buttons
should be used for positive actions such as “create”,
“share”, or “navigate”.
FloatingActionButton Screenshots
FloatingActionButton
Button Widgets
In Flutter development, you may use different types of buttons in your
app design, A new set of basic material button widgets and themes
have been added to Flutter, The FlatButton, RaisedButton and
OutlineButton widgets have been replaced by TextButton,
ElevatedButton, and OutlinedButton respectively
TextButton Widget
Text Button is a Material Design's button that comes without border or
elevation change by default. In Flutter, this button can be created using
TextButton widget which was introduced in Flutter 1.22
Example
TextButton Screenshots
TextButton Screenshots
When you pressed will display the print message 'Simple Text Button' in
Debug Console:
TextButton With Icon
TextButton With Icon
ElevatedButton
Elevated Button is one of Material Design's buttons whose
characteristic is the elevation increases when it's being pressed by the
user. If you need to create a Material Design's Elevated Button in
Flutter, you can use ElevatedButton widget. The widget has been
available since Flutter 1.22.
ElevatedButton Example
ElevatedButton Screenshots
ElevatedButton Screenshots
When you pressed will display the print message ‘Simple Elevated
Button' in Debug Console:
ElevatedButton With Icon
ElevatedButton With Icon
Important points about Dart List
• These are some important information you should know before working with Dart
List:

• There are kinds of List: fixed-length list (list’s length cannot be changed) &
growable list (size can be changed to accommodate new items or remove items)
• Dart List is an ordered collection which maintains the insertion order of the items.
• Dart List allows duplicates and null values.
• While an operation on the list is being performed, modifying the list’s length
(adding or removing items) will break the operation.
Create a List in Dart/Flutter
• How to create a List using List() constructor or literal syntax.
• How to add new items to a List.
Remove items from List in
Dart/Flutter
DropdownButton Widget

• A drop down button widget is similar to a drop-down menu that allows your app user to
choose only one value from a list. It depends on other Dart methods in its configuration
as you will see in the next example
DropdownButton Widget
setState
A widget’s state is stored in a State object, separating the widget’s
state from its appearance.
The state consists of values that can change, like a checkbox is
checked.
When the widget’s state changes, the state object calls setState(),
telling the framework to redraw the widget.
ButtonBar Widget

This widget is a horizontal arrangement of other types of buttons. For example, this
widget can include three or four of flat or outline buttons and arrange them horizontally
to appear as a horizontal navigation bar for your app
These buttons are children widgets for the ButtonBar widget , and it is a good idea to
use the alignment property with value : MainAxisAlignment.center which places
other children buttons as close to the middle of the main axis as possible.
ButtonBar Screenshots
PopupMenuButton Widget
App Structure and Navigation
The app structure is almost similar to the web site structure. The first
app interface which will open when users run your app is called the
main interface, while it is called a home page for the web site. In Flutter
development your main interface is the main.dart file. The main app
interface or screen must include links or routes to your other app
screens or your app parts.
App Structure and Navigation
In your app, you will use various navigation techniques to move from
one screen to another. For any app to be successful, it should be easy
to use and have a variety of navigation techniques. This would help app
users to reach and use app data in a simple and easy manner, using
friendly app interfaces
App Structure and Navigation
Navigate A New Screen and
Back
Mobile apps typically reveal their contents via full-screen elements
called “screens” or “pages”. In Flutter, these elements are called routes
and they are managed by a Navigator class or widget. Flutter navigator
takes you on each of these routes to see each of these screens.
The Navigator class manages a stack of Route (screen) objects and
provides methods for managing the stack, like Navigator.push and
Navigator.pop.
Navigator.push() method is used to navigate to the second route.
Navigator.pop() method is used to return to the first route or screen.
Using Navigator Class
• Create two routes
First, create two routes to work with. Since this is a basic example, each
route contains only a single button. Tapping the button on the first
route navigates to the second route. Tapping the button on the second
route returns to the first route.
First, set up the visual structure:
First Route
First Route
Second Route
Second Route
Navigate to the Second Route
using Navigator.push()

// Within the `FirstRoute` widget


onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Screen1()),
);
}
Return to the First Route using
Navigator.pop()

// Within the SecondRoute widget


onPressed: () {
Navigator.pop(context);
}
Navigate With Named Routes
In most apps, usually, you have many routes on each screen, especially
the first screen. You can easily create a navigation for each route using
named navigation route method. In this method, you will name each
route by a name , and then call this route using this name when you want
to navigate to it. You will use Dart map technique to assign a name (key)
to each route.
In DART, map is an object that associates keys to values. In other words is
an interface designed to manipulate a collection of keys which point to
values (routes).
To work with named routes, use the Navigator.pushNamed() function as
illustrated in the following example:
Define the Routes
Define the routes by providing additional properties to the MaterialApp
constructor: the initialRoute and the routes themselves.
The initialRoute property defines which route the app should start
with. The routes property defines the available named routes and the
widgets to build when navigating to those routes.
Define the Routes
MaterialApp(
// Start the app with the "/" named route. In this case, the app starts
// on the FirstScreen widget.
initialRoute: '/',
routes: {
// When navigating to the "/" route, build the FirstScreen widget.
'/': (context) => const Screen0(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/second': (context) => const Screen1(),
},
)
Navigate Second Route using
Named Routes
With the widgets and routes in place, trigger navigation by using the
Navigator.pushNamed() method. This tells Flutter to build the widget defined in the
routes table and launch the screen.
In the build() method of the FirstRoute widget, update the onPressed() callback:

// Within the `FirstRoute` widget


onPressed: () {
// Navigate to the second screen using a named route.
Navigator.pushNamed(context, '/second');
}
Return to the First Route using
Named Routes
To navigate back to the first screen, use the Navigator.pop() function.

// Within the SecondScreen widget


onPressed: () {
// Navigate back to the first screen by popping the current route
// off the stack.
Navigator.pop(context);
}
Send Data and Return Among
Screens
Often, you do not only need to navigate to a new screen, but you also need to pass
data in between screens as well.
• Make the SecondScreen constructor take a parameter for the type of data that
you want to send to it. In this particular example, the data is defined to be a String
value and is set here with this.text

class Screen1 extends StatelessWidget {


final String text;
Screen1({Key key, @required this.text}) : super(key: key);

...
Send Data and Return Among
Screens
• Then use the Navigator in the FirstScreen widget to push a route to
the SecondScreen widget. You put the data that you want to send as a
parameter in its constructor.

Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Screen1(text: 'Hello',),
));
WebView in Flutter

You can embed a web browser inside your app using WebView widget. A WebView widget
is a crucial component for many apps that need to display website content without
worrying about using Android or iOS native views
Incorporating the WebView plug-in into your app is extremely simple. WebView widget is
just
like any other widget in Flutter
you can add the following WebView widget to display Android ATC web site content in
your app interface. By default, JavaScript in your WebView widget is disabled, so to
enable it, you should add the javascriptMode property
Example
Navigation and Routing a Pizza Store App
End

You might also like