Embedded Files
Advanced Navigation Techniques
Advanced Navigation Techniques
Creating Sidebar Menu (Drawer)
Creating Sidebar Menu (Drawer)
Create a stateful widget named SideDrawer
class SideDrawer extends StatefulWidget {
const SideDrawer({super.key});
@override
State<SideDrawer> createState() => _SideDrawerState();
}
class _SideDrawerState extends State<SideDrawer> {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(children: [
UserAccountsDrawerHeader(
accountName: Text('Junn Eric'),
accountEmail: Text('junn.eric@utas.edu.om'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: ClipOval(
child: Image(
image: AssetImage('images/profile.png'),
fit: BoxFit.cover,
width: 100.0,
height: 100.0,
),
),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text(
'Home',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onTap: () {},
),
ListTile(
leading: Icon(Icons.question_answer),
title: Text(
'About',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onTap: () {},
),
ListTile(
leading: Icon(Icons.edit_document),
title: Text(
'Registration',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onTap: () {},
),
ListTile(
leading: Icon(Icons.login),
title: Text(
'Sign In',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onTap: () {},
),
ListTile(
leading: Icon(Icons.logout),
title: Text(
'Sign Out',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onTap: () {},
),
]),
);
}
}
Add drawer from MyHome widget
Add drawer from MyHome widget
class MyHome extends StatelessWidget {
const MyHome({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Tourism App',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
),
),
centerTitle: true,
backgroundColor: Colors.green[800],
leading: Builder(builder: (context) {
return IconButton(
color: Colors.white,
icon: Icon(Icons.menu),
onPressed: () {
Scaffold.of(context).openDrawer();
},
);
}),
),
drawer: Drawer(
child: SideDrawer(),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.green[800],
margin: EdgeInsets.zero,
padding: EdgeInsets.all(20),
height: 300.0,
width: 500.0,
child: Image(
image: AssetImage('images/Salalah1.jpg'),
),
),
Container(
alignment: Alignment.center,
width: double.infinity,
color: Colors.amber,
child: Text(
'Popular Places',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Row(
children: [
Expanded(
child: Column(
children: [
Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child:
Image(image: AssetImage('images/Salalah2.jpg')),
),
),
Row(
children: [
Container(
margin: EdgeInsets.only(left: 10),
child: Text('Darbat Falls / OMR 25')),
Spacer(),
Align(alignment: Alignment.bottomRight, child: Fav()),
],
)
],
),
),
Expanded(
child: Column(
children: [
Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child:
Image(image: AssetImage('images/Salalah3.jpg')),
),
),
Row(
children: [
Container(
margin: EdgeInsets.only(left: 10),
child: Text('Haffa Beach / OMR 20 ')),
Spacer(),
Align(alignment: Alignment.bottomRight, child: Fav()),
],
)
],
),
),
],
),
Container(
width: double.infinity,
color: Colors.amber[900],
height: 5,
),
Container(
width: double.infinity,
color: Colors.grey,
child: Text(
'Currency Converter',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
Currency(),
Discount(),
Tours(),
MyTableCalendar(),
SizedBox(
height: 100.0,
),
DropButton()
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.green[400],
foregroundColor: Colors.white,
child: Icon(Icons.add_circle_sharp),
),
);
}
}
Hamburger Menu icon is displayed on the upper left corner of the app
Creating the Registration Page
Creating the Registration Page
Create a new file named registration_page.dart inside the file create a stateful widget named RegistrationPage
import 'package:flutter/material.dart';
class RegistrationPage extends StatefulWidget {
const RegistrationPage({super.key});
@override
State<RegistrationPage> createState() => _RegistrationPageState();
}
class _RegistrationPageState extends State<RegistrationPage> {
TextEditingController _uname = TextEditingController();
TextEditingController _pass = TextEditingController();
TextEditingController _cpass = TextEditingController();
TextEditingController _email = TextEditingController();
TextEditingController _fullname = TextEditingController();
TextEditingController _birthdate = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.white,
padding: EdgeInsets.all(40.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(image: AssetImage('images/register.jpg')),
Text(
'Create an Account',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 20),
TextFormField(
controller: _uname,
decoration: InputDecoration(
labelText: 'Username',
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextFormField(
controller: _pass,
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextFormField(
controller: _cpass,
obscureText: true,
decoration: InputDecoration(
labelText: 'Confirm Password',
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextFormField(
controller: _email,
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextFormField(
controller: _fullname,
decoration: InputDecoration(
labelText: 'Fullname',
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextFormField(
controller: _birthdate,
decoration: InputDecoration(
labelText: 'Birthdate',
border: OutlineInputBorder(),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
},
child: Text('Register'),
),
TextButton(
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) =>
LoginPage()), // Replace with your SignUp widget
);
},
child: Text('Already have an account? Login'),
),
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back', style: TextStyle(color: Colors.red)),
),
],
),
),
);
}
}
Opening Another Screen
Opening Another Screen
ListTile(
leading: Icon(Icons.edit_document),
title: Text(
'Registration',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => RegistrationPage(),
));
},
),
Source Code Available on GitHub
https://github.com/juntyms/tourismapp/tree/chapter4
Page updated
Google Sites
Report abuse