import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:tangheem/classes/const.dart'; class CommonAppbarWidget extends StatefulWidget { final bool showDrawer; final Widget child; CommonAppbarWidget({Key key, this.showDrawer = false, @required this.child}) : super(key: key); @override _CommonAppbarWidgetState createState() { return _CommonAppbarWidgetState(); } } class _CommonAppbarWidgetState extends State { final GlobalKey _scaffoldKey = new GlobalKey(); @override void initState() { super.initState(); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( key: widget.showDrawer ? _scaffoldKey : null, drawer: widget.showDrawer ? drawerView() : null, drawerScrimColor: Colors.black.withOpacity(.3), body: SafeArea( child: Column( children: [ Container( color: Colors.white, height: 100, padding: EdgeInsets.only(top: 8, bottom: 8), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ IconButton( icon: Icon(widget.showDrawer ? Icons.menu : Icons.arrow_back_ios, color: Const.textGrey), padding: EdgeInsets.only(left: 16), onPressed: () { if (widget.showDrawer) { _scaffoldKey.currentState.openDrawer(); } else { Navigator.pop(context); } }, ), SvgPicture.asset( "assets/logos/tangheem_logo.svg", height: 100, width: 100, alignment: Alignment.centerRight, ) ], ), ), Expanded(child: Directionality(textDirection: TextDirection.rtl, child: widget.child)), ], ), ), ); } Widget drawerView() { var height = MediaQuery.of(context).padding.top; return Drawer( elevation: 0, child: Container( color: Colors.white, child: Column( children: [ Container( height: 100 + height, padding: EdgeInsets.only(left: 0, top: height), alignment: Alignment.centerLeft, child: IconButton( icon: Icon(Icons.clear, color: Const.textGrey), onPressed: () { if (_scaffoldKey.currentState.isDrawerOpen) { Navigator.pop(context); } }, ), ), Container( margin: EdgeInsets.only(top: 8, bottom: 16), padding: EdgeInsets.only(left: 12, right: 12), child: Row( children: [ commonIconButton("assets/icons/accessibility.svg", () {}), commonIconButton("assets/icons/dark_mode.svg", () {}), commonIconButton("assets/icons/bookmark.svg", () {}), commonIconButton("assets/icons/increase_size.svg", () {}), commonIconButton("assets/icons/reduce_size.svg", () {}), commonIconButton("assets/icons/notification.svg", () {}), commonIconButton("assets/icons/user_logged.svg", () {}), ], ), ), Expanded( child: Container( margin: EdgeInsets.only(left: 24, right: 24), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ myListItem("assets/icons/home.svg", "الرئيسية", true), SizedBox(height: 2), myListItem("assets/icons/encyclopedia.svg", "موسوعة تنغيم", false), Container( width: double.infinity, child: Row( children: [ Expanded( child: myListItem("assets/icons/about.svg", "التعريف بموسوعة تنغيم", false), ), Container( // width: 35, height: 40, margin: EdgeInsets.only(right: 17, left: 10), // color: Const.primaryBlack, child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), ), ], ), ), Container( width: double.infinity, child: Row( children: [ Expanded( child: myListItem("assets/icons/browse.svg", "تصفح الموسوعة", false), ), Container( // width: 35, height: 40, margin: EdgeInsets.only(right: 17, left: 10), // color: Const.primaryBlack, child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), ), ], ), ), Container( width: double.infinity, child: Row( children: [ Expanded( child: myListItem("assets/icons/download.svg", "تنزيل الموسوعة", false), ), Container( // width: 35, height: 40, margin: EdgeInsets.only(right: 17, left: 10), // color: Const.primaryBlack, child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), ), ], ), ), Container( width: double.infinity, child: Row( children: [ Expanded( child: myListItem("assets/icons/copyrights.svg", "حقوق الموسوعة", false), ), Container( // width: 35, height: 40, margin: EdgeInsets.only(right: 17, left: 10), // color: Const.primaryBlack, child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), ), ], ), ), Container( width: double.infinity, child: Row( children: [ Expanded( child: myListItem("assets/icons/members.svg", "اللجنة الاستشارية", false), ), Container( // width: 35, height: 40, margin: EdgeInsets.only(right: 17, left: 10), // color: Const.primaryBlack, child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), ), ], ), ), SizedBox(height: 2), myListItem("assets/icons/read_quran.svg", "اقرأ القرآن الكريم", false), SizedBox(height: 2), myListItem("assets/icons/contact.svg", "الاتصال بنا", false), ], ), ), ), Container( margin: EdgeInsets.only(top: 16, bottom: 0), padding: EdgeInsets.only(left: 32, right: 32), child: Row( children: [ commonIconButton("assets/icons/linkedin.svg", () {}, size: 35), commonIconButton("assets/icons/pinterest.svg", () {}, size: 35), commonIconButton("assets/icons/whatsapp.svg", () {}, size: 35), commonIconButton("assets/icons/facebook.svg", () {}, size: 35), commonIconButton("assets/icons/instgram.svg", () {}, size: 35), commonIconButton("assets/icons/twitter.svg", () {}, size: 35), ], ), ), ], ), ), ); } Widget commonIconButton(String icon, VoidCallback onPressed, {double size}) { return Expanded( child: IconButton(padding: EdgeInsets.zero, icon: SvgPicture.asset(icon, height: size ?? 25, width: size ?? 30, color: Const.textGrey), onPressed: onPressed), ); } Widget myListItem(String icon, String title, bool isSelected) { return Container( height: 40, padding: EdgeInsets.only(left: 8, right: 8), alignment: Alignment.centerRight, decoration: BoxDecoration( borderRadius: BorderRadius.circular(6), gradient: isSelected ? LinearGradient( stops: [0.0, 0.5], begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Const.gradientPink, Const.gradientOrange], ) : null, ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Text( title, style: TextStyle(fontSize: 14, color: isSelected ? Colors.white : Const.textGrey), ), SizedBox(width: 8), SvgPicture.asset(icon, height: 20, width: 20, color: isSelected ? Colors.white : Const.textGrey), ], ), ); } }