Today in this post we are going to make a professional side for the first time. In which on clicking the button a driver will open and in which a side will open. We are going to make this in flutter. Let us know a little about flutter. This is a popular open source SDK brought by Google with the help of which we can develop native applications. Native application means in single code we can develop applications that run on multiple platforms.
We are going to make a side menu bar in flutter. There will be a header on the top in which the user's name and niche email id will be displayed. In this side menu there will be funds, profile, overall profit loss, settings, referral, contact etc. At the bottom there will be a link to Social Media. Facebook, Instagram, WhatsApp etc. You can also change them as per your need. Follow the information given by us step by step.
Step : 1
Create your project and create a screen named sidebutton.dart and paste the code given by us in it. Or if you have already created a project then you can use this in that too.
Sidebutton.dart
import 'package:flutter/material.dart';
class InvestmentScreen extends StatefulWidget {
@override
_InvestmentScreenState createState() => _InvestmentScreenState();
}
void _openSideMenu(BuildContext context) {
showGeneralDialog(
context: context,
barrierDismissible: true,
barrierLabel: "Side Menu",
barrierColor: Colors.black54,
transitionDuration: Duration(milliseconds: 300),
pageBuilder: (context, animation, secondaryAnimation) {
return Align(
alignment: Alignment.centerLeft,
child: Material(
color: Colors.transparent,
child: Row(
children: [
SideMenuScreen(),
Expanded(
child: GestureDetector(
onTap: () => Navigator.pop(context),
),
),
],
),
),
);
},
transitionBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: Tween(begin: Offset(-1, 0), end: Offset(0, 0))
.animate(animation),
child: child,
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: MyColors.blue,
title: Text("Order", style: TextStyle(color: Colors.white)),
leading: IconButton(
icon: Icon(Icons.menu, color: Colors.white),
onPressed: () => _openSideMenu(context),
),
actions: [
IconButton(icon: Icon(Icons.help_outline, color: Colors.white), onPressed: () {}),
IconButton(icon: Icon(Icons.notifications_none, color: Colors.white), onPressed: () {}),
],
),
),
},
Step : 2
Create a SideMenuScreen.dart in step 2 and paste the code we provided into it, which will contain all the elements of your Drover.
SideMenuScreen.dart
import 'package:flutter/material.dart';
class SideMenuScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: [
UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: Colors.blue.shade100,
),
accountName: Text("UC1234", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
accountEmail: Text("umesh@contact.in", style: TextStyle(color: Colors.black54)),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text("UC", style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold)),
),
),
Expanded(
child: ListView(
children: [
_buildMenuItem("Funds", Icons.currency_rupee),
_buildMenuItem("Profile", Icons.person),
_buildMenuItem("Overall P&L", Icons.pie_chart),
_buildMenuItem("Setting", Icons.settings),
_buildMenuItem("Referral", Icons.link),
_buildMenuItem("Become HTFX User", Icons.group),
_buildMenuItem("Contact Us", Icons.headset_mic),
_buildMenuItem("Support", Icons.info),
_buildMenuItem("Share us", Icons.share),
_buildMenuItem("Rate us / Write a review", Icons.rate_review),
_buildMenuItem("Logout", Icons.exit_to_app),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text("Follow Us On", style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildSocialIcon(Icons.facebook, Colors.blue),
_buildSocialIcon(Icons.image, Colors.pink), // Instagram placeholder
_buildSocialIcon(Icons.linked_camera, Colors.blueAccent), // LinkedIn placeholder
_buildSocialIcon(Icons.camera, Colors.lightBlue), // Twitter placeholder
],
),
SizedBox(height: 8),
Text("Version 1.0.0", style: TextStyle(fontSize: 12, color: Colors.grey)),
],
),
),
],
),
);
}
ListTile _buildMenuItem(String title, IconData icon) {
return ListTile(
leading: Icon(icon, color: Colors.black54),
title: Text(title, style: TextStyle(color: Colors.black)),
onTap: () {},
);
}
Widget _buildSocialIcon(IconData icon, Color color) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: CircleAvatar(
backgroundColor: color,
radius: 15,
child: Icon(icon, color: Colors.white, size: 18),
),
);
}
}
Code Explanation
- In both the codes, the package of flutter has been inputted in step 1 and step 2 of the code.
- The menu button is placed inside the appbar in Scaffold.
- On menu click a method is created with name _opensidemenu inside which Drover's code is placed which opens and closes the menu.
- Sidemainscreen.dart contains a table that returns all the elements.
Output
0 Comments