How to create a unique Drawer?

Asked

Viewed 271 times

0

I would like to create a Drawer unique to my entire application and get a consistency on it. How can I do this without having to rewrite it on all my pages?

For example, I have the following Drawer in my HomePage:

final drawer = Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget> [
      DrawerHeader(
        child: logo,
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        leading: Icon(Icons.compare_arrows),
        title: Text('Transmissão'),
        onTap: () {
          Navigator.of(context).pushNamed(TransmissionListPage.tag);
        },
      ),
      ListTile(
        leading: Icon(Icons.attach_money),
        title: Text('Cotação'),
        onTap: () {
          Navigator.of(context).pushNamed(CotationListPage.tag);
        },
      ),
    ],
  ),
);

But when I go to the broadcast page, I have to rewrite all this code in order to have the same navigation capabilities. I would like to write only once, preferably by deleting the current page from the listing.

dart flutter
  • 1

    Another way is to create a method that makes Scaffold’s Body dynamic. Follow the link of the post that teaches how to do this: https://magrizo.wordpress.com/2018/12/11/como-usar-o-drawer-para-varias-telas-no-flutter/

1 answer

1


I solved this problem by creating a Scaffold standard for the application:

import 'package:flutter/material.dart';
import 'transmission_list_page.dart';

class MeuAppScaffold extends StatelessWidget {
  final Widget body;

  MeuAppScaffold({this.body});

  @override
  Widget build(BuildContext context) {
    final logo = Hero(
      tag: 'hero',
      child: CircleAvatar(
        backgroundColor: Colors.white,
        radius: 48.0,
        child: Container(
          child: Image.asset('assets/logo_blue.png'),
          padding: EdgeInsets.all(30.0),
        ),
      ),
    );

    final appBar = AppBar(
      title: Text('MeuApp Comercial'),
      actions: <Widget> [],
    );

    final drawer = Drawer(
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [
              Colors.lightBlue,
              Colors.white,
            ]
          ),
        ),
        child: ListView(
          children: <Widget> [
            DrawerHeader(
              child: logo,
            ),
            ListTile(
              leading: Icon(Icons.compare_arrows),
              title: Text('Transmissão'),
              onTap: () {
                Navigator.of(context).pushNamed(TransmissionListPage.tag);
              },
            ),
            ListTile(
              leading: Icon(Icons.attach_money),
              title: Text('Cotação'),
              onTap: () { /* react to the tile being tapped */ },
            ),
          ]
        ),
      ),
    );

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: appBar,
      drawer: drawer,
      body: body,
    );
  }
}

And using it in function build of the screens:

Widget build(BuildContext context) {
    return MeuAppScaffold(
      body: Center(
      child: ListView(
        shrinkWrap: true,
        padding: EdgeInsets.only(left: 24.0, right: 24.0),
        children: <Widget> [],
      ),
    ));
  }
}

Browser other questions tagged dart flutter

You are not signed in. Login or sign up in order to post.