Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve Flutter UI side-pull drawer menu, I hope you will learn something after reading this article, let's discuss it together!

In mobile development, we can navigate through the bottom navigation bar, tab page, or side drawer menu. This is a small screen that can make full use of space. Our design should be not only practical but also interesting, so that it can be regarded as a good UI design. We usually have the upper and lower structure in Scaffold, and the head is the main interface under the title bar.

@ overrideWidget build (BuildContext context) {/ / TODO: implement build return Scaffold (appBar: AppBar (title: Text (title),), body: Center (child: Text ('$title Demo'),))

In addition to the appBar and body attributes, Scaffold thinks that there are also drawer attributes that make it easy for us to define side drawers.

@ overrideWidget build (BuildContext context) {/ / TODO: implement build return Scaffold (appBar: AppBar (title: Text (title),), body: Center (child: Text ('$title Demo'),), drawer: Drawer (),)

This allows you to add content to the side drawer in child, which is to add a list. DrawerHeader adds a title block. Then add the background color to the decoration. Then add a piece of content through the ListTile component

Child: ListView (padding: EdgeInsets.zero, children: [DrawerHeader (child: Text ('$title Demo'), decoration: BoxDecoration (color: Colors.blue)), ListTile (title: Text ("React"), onTap: () {Navigator.pop (context) },), ListTile (title: Text ("Vue"), onTap: () {Navigator.pop (context);},)],

Add an onTap event for ListTile to return to the main interface via Navigator.

ListTile (title: Text ("Vue"), onTap: () {Navigator.pop (context);},)

Complete code

Import 'package:flutter/material.dart'; class DrawerApp extends StatelessWidget {final appTitle = "side drawer"; @ override Widget build (BuildContext context) {/ / TODO: implement build return MaterialApp (title:appTitle, home: MyHomePage (title:appTitle),);} class MyHomePage extends StatelessWidget {final String title; MyHomePage ({Key key,this.title}): super (key:key) Override Widget build (BuildContext context) {/ / TODO: implement build return Scaffold (appBar: AppBar (title: Text (title),), body: Center (child: Text ('$title Demo'),), drawer: Drawer (child: ListView (padding: EdgeInsets.zero, children: [DrawerHeader (child: Text ('$title Demo')) Decoration: BoxDecoration (color: Colors.blue), ListTile (title: Text ("React"), onTap: () {Navigator.pop (context) },), ListTile (title: Text ("Vue"), onTap: () {Navigator.pop (context);},)],),) }} after reading this article, I believe you have a certain understanding of "how to realize the side pull drawer menu in Flutter UI". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.