preface

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android.

Nicholas Gaulbag, a famous IT expert, once said: The wheel is the ladder of IT progress! Popular frames are the same, with wheels pick one in a million! Flutter, a cross-platform development framework that has been on the rise for the last two years, has a smaller third-party ecosystem than other mature frameworks, but it has a lot of wheels. This series of articles select the wheels commonly used in daily APP development to share, so as to improve the efficiency of brick moving, and hope that the ecology of Flutter will become more and more perfect, with more and more wheels.

This series of articles has been prepared with over 50 wheel recommendations, working for reasons that try to produce an article every 1-2 days.

This series of articles is for those who already have some of the basics of FLUTTER

The body of the

The wheel

  • Wheel name: hidden_drawer_menu
  • Overview of wheels: The Flutter is a full-screen dynamic drawer assembly.
  • Wheels by [email protected]
  • ★★★★ ★
  • ★★★
  • Effect preview:

The installation

dependencies:
  hidden_drawer_menu: ^ 1.1.2
Copy the code
import 'package:hidden_drawer_menu/hidden_drawer/hidden_drawer_menu.dart';
Copy the code

Method of use

Widget build(BuildContext context) {
    return SimpleHiddenDrawer(
        menu:Menu(), // Drawer area layout
        screenSelectedBuilder: (position,controller) {
            return Scaffold( // Page body area
                appBar: AppBar(
                    title: Text("hidden_drawer_menu"),
                ),
                body: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Center(
                            child: Text("Current page $position"),
                        ),
                        Center(
                            child: FlatButton(
                                child: Text("Open the drawer"), onPressed: (){ controller.toggle(); },),) [,),); }); }Copy the code

Contents of drawer area layout:

class Menu extends StatefulWidget {
    @override
    _MenuState createState() => _MenuState();
}

class _MenuState extends State<Menu> {
    @override
    Widget build(BuildContext context) {
    return Container(
        width: double.maxFinite,
        height: double.maxFinite,
        color: Colors.cyan,
        padding: const EdgeInsets.all(8.0),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
                FlatButton(
                    child: Text("Menu one",style: TextStyle(color: Colors.white,fontSize: 20)),
                    onPressed: (){
                        SimpleHiddenDrawerProvider.of(context).setSelectedMenuPosition(0);
                    },
                ),
                FlatButton(
                    child: Text("Menu two",style: TextStyle(color: Colors.white,fontSize: 20)),
                    onPressed: (){
                        SimpleHiddenDrawerProvider.of(context).setSelectedMenuPosition(1); },)],),); }}Copy the code

Control drawer switch:

SimpleHiddenDrawerProvider.of(context).toggle();
Copy the code

Monitor drawer button postion:

SimpleHiddenDrawerProvider.of(context).getPositionSelectedListener().listen((position){
  print(position);
});
Copy the code

Monitor current drawer status:

SimpleHiddenDrawerProvider.of(context).getMenuStateListener().listen((state){
  print(state); //closed,opening,open,closing
});
Copy the code

If it were just a drawer, it would be that simple. See the warehouse documentation for more usage.

At the end

  • Address of wheel warehouse: pub.flutter-io.cn/packages/hi…
  • Series demo source: github.com/826327700/f…