tangheem/lib/ui/common_appbar.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/ui/screens/login_screen.dart';
import 'package:tangheem/ui/screens/quran_screen.dart';

class CommonAppbar extends StatefulWidget {
  final bool showDrawer;
  final Widget child;
  final bool isFirst;

  CommonAppbar({Key key, this.showDrawer = false, @required this.child, this.isFirst = false}) : super(key: key);

  @override
  _CommonAppbarState createState() {
    return _CommonAppbarState();
  }
}

class _CommonAppbarState extends State<CommonAppbar> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @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,
      resizeToAvoidBottomInset: true,
      drawerScrimColor: Colors.black.withOpacity(.3),
      body: SafeArea(
        child: Column(
          children: [
            Container(
              color: Colors.white,
              height: 100,
              padding: EdgeInsets.only(top: 8, bottom: 8, right: 16),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  if (!widget.isFirst)
                    IconButton(
                      icon: Icon(widget.showDrawer ? Icons.menu : Icons.arrow_back_ios, color: ColorConsts.textGrey),
                      padding: EdgeInsets.only(left: 16),
                      onPressed: () {
                        if (widget.showDrawer) {
                          _scaffoldKey.currentState.openDrawer();
                        } else {
                          Navigator.pop(context);
                        }
                      },
                    ),
                  Expanded(child: SizedBox()),
                  Hero(
                    tag: "logo",
                    child: 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: ColorConsts.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", () {
                    Navigator.pushNamed(context, LoginScreen.routeName);
                  }),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                physics: BouncingScrollPhysics(),
                padding: EdgeInsets.only(left: 24, right: 24),
                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: ColorConsts.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: ColorConsts.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: ColorConsts.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: ColorConsts.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: ColorConsts.primaryBlack, thickness: .7, width: 1),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 2),
                  myListItem("assets/icons/read_quran.svg", "اقرأ القرآن الكريم", false, onTap: () async {
                    await Navigator.pushNamed(context, QuranScreen.routeName, arguments: "");
                  }),
                  SizedBox(height: 2),
                  myListItem("assets/icons/contact.svg", "الاتصال بنا", false),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 16, bottom: 12),
              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),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 32, right: 32, bottom: 8),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Powered by Cloud Solutions",
                    maxLines: 1,
                    textAlign: TextAlign.right,
                    style: TextStyle(fontSize: 14),
                  ),
                  SizedBox(width: 8),
                  SvgPicture.asset("assets/logos/cloud_logo.svg", width: 30, height: 30)
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  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),
          onPressed: () {
            Navigator.pop(context);
            Future.delayed(Duration(milliseconds: 200), () => onPressed());
          }),
    );
  }

  Widget myListItem(String icon, String title, bool isSelected, {VoidCallback onTap}) {
    return InkWell(
      onTap: () {
        Navigator.pop(context);
        if (onTap != null) {
          Future.delayed(Duration(milliseconds: 200), () => onTap());
        }
      },
      child: 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: [ColorConsts.gradientPink, ColorConsts.gradientOrange],
                )
              : null,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              title,
              style: TextStyle(fontSize: 14, color: isSelected ? Colors.white : ColorConsts.textGrey),
            ),
            SizedBox(width: 8),
            SvgPicture.asset(icon, height: 20, width: 20, color: isSelected ? Colors.white : ColorConsts.textGrey),
          ],
        ),
      ),
    );
  }
}