Aplikasi Berbasis Platform
Layout (3) & Navigation
Outline
• Tabview
• Pageview
• Navigation
Tabview
• For the first to create tab is DefaultTabController
• There is 2 option to use the tabview
–TabBar: It is used to display the top view of tabs or more
specifically it displays the content of the tab.
–TabBarView: It is used to display the contents when a
tab is pressed.
Tabview (Tab Bar)
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.home_filled),text: "Home",),
Tab(icon: Icon(Icons.account_box_outlined),text: "Account",),
Tab(icon: Icon(Icons.alarm),text: "Alarm",),
],
),
Tabview (TabBarView)
body: const TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_tran
sit),
Icon(Icons.directions_bike
),
Icon(Icons.directions_bike
),
],
Tabview (Scrollable)
• There is any altenative for many tabs more
than 3
• We can use scrollable for best UX for user
Tabview (Scrollable)
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.home_filled),text: "Home",),
Tab(icon: Icon(Icons.account_box_outlined),text:
"Account",),
Tab(icon: Icon(Icons.alarm),text: "Alarm",),
],
),
Outline
• TabView
• Pageview
• Navigation
Pageview
• A PageView is a widget which generates scrollable pages on the screen.
This can either be a fixed list of pages or a builder function which builds
repeating pages. PageView acts similar to a ListView in the sense of
constructing elements.
• All types of Page Views can have horizontal or vertically scrolling pages.
• The types of PageView are:
– PageView
– PageView.builder
– PageView.custom
Pageview
PageView (default Constructor)
This type takes a fixed list of children (pages) and makes them scrollable.
Code :
PageView(
children: <Widget>[
Container(
color: Colors.pink,
),
Container(color: Colors.cyan,),
Container(color: Colors.deepPurple,
),],)
PageView.builder
Code :
PageView.builder(
itemBuilder: (context, position) {
return Container(
color: position % 2 == 0 ? Color.fromARGB(255, 255, 248,
250) : Color.fromARGB(255, 11, 179, 201), );
},
)
Outline
• TabView
• PageView
• Navigation
Navigation
• Go to another page when an event occurred
• Variations:
– Navigate to another screen and go back
– Navigate with named routes
– Navigate with passing arguments / data
– Return data and send data to new screen
Navigate to new screen and go back
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
Code Example
class FirstRoute extends StatelessWidget { class SecondRoute extends StatelessWidget {
const FirstRoute({Key? key}) : super(key: key); const SecondRoute({Key? key}) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: const Text('First Route'), title: const Text('Second Route'),
), ),
body: Center( body: Center(
child: ElevatedButton( child: ElevatedButton(
child: const Text('Open route'), onPressed: () {
onPressed: () { Navigator.pop(context);
Navigator.push( },
context, child: const Text('Go back!'),
MaterialPageRoute(builder: (context) => const ),
SecondRoute()), ),
); );
}, }
), }
),
);
}
}
Navigate with named routes
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Named Routes Demo',
// 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 FirstScreen(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/second': (context) => const SecondScreen(),
},
),
);
}
Code Example
class FirstScreen extends StatelessWidget { class SecondScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key); const SecondScreen({Key? key}) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: const Text('First Screen'), title: const Text('Second Screen'),
), ),
body: Center( body: Center(
child: ElevatedButton( child: ElevatedButton(
// Within the `FirstScreen` widget // Within the SecondScreen widget
onPressed: () { onPressed: () {
// Navigate to the second screen using a named route. // Navigate back to the first screen by popping the
Navigator.pushNamed(context, '/second'); current route
}, // off the stack.
child: const Text('Launch screen'), Navigator.pop(context);
), },
), child: const Text('Go back!'),
); ),
} ),
);
}
}
Another examples
• Pass arguments : • Return data and send
https://docs.flutter.d data to new screen :
ev/cookbook/navigati https://docs.flutter.d
on/navigate-with- ev/cookbook/navigati
arguments on/passing-data
Kuy coding
• Kerjakan Tutorial 3.1 di LMS
Reference
• https://blog.codemagic.io/designing-complex-ui-
using-android-constraintlayout/
• https://flutter.dev/
• https://blog.codemagic.io/building-responsive-
applications-with-flutter/
• https://medium.com/flutter-community/a-deep-
dive-into-pageview-in-flutter-with-custom-
transitions-581d9ea6dded
THANK YOU
