美文网首页
Flutter Example Drawer

Flutter Example Drawer

作者: 三只仓鼠 | 来源:发表于2018-11-22 10:31 被阅读0次
import 'package:flutter/material.dart';
import 'package:drawer/screens/home.dart';
import 'package:drawer/screens/account.dart';
import 'package:drawer/screens/settings.dart';

void main() {
  runApp(new MaterialApp(
    home: HomeScreen(),
    routes: <String, WidgetBuilder>{
      // define the routes
      SettingsScreen.routename: (BuildContext context) => new SettingsScreen(),
      AccountScreen.routename: (BuildContext context) => new AccountScreen(),
    },
  ));
}

import 'package:flutter/material.dart';
import 'account.dart';
import 'settings.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  Drawer getNavDrawer(BuildContext context) {
    var headerChild = new DrawerHeader(
      child: new Text("Header"),
    );
    var aboutChild = new AboutListTile(
        child: new Text("About"),
        applicationName: "Application Name",
        applicationVersion: "v1.0.0",
        applicationIcon: new Icon(Icons.adb),
        icon: new Icon(Icons.info));
    ListTile getNavItem(var icon, String s, String routeName) {
      return new ListTile(
        leading: new Icon(icon),
        title: new Text(s),
        onTap: () {
          setState(() {
            Navigator.of(context).pop();
            Navigator.of(context).pushNamed(routeName);
          });
        },
      );
    }

    var myNavChildren = [
      headerChild,
      getNavItem(Icons.settings, "Settings", SettingsScreen.routename),
      getNavItem(Icons.home, "Home", "/"),
      getNavItem(Icons.account_box, "Account", AccountScreen.routename),
      aboutChild
    ];
    ListView listView = new ListView(children: myNavChildren);
    return new Drawer(child: listView);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new Center(
        child: new Text("Navigation Drawer Example"),
      )),
      body: new Container(
        child: new Center(
          child: new Text("Home Screen"),
        ),
      ),
      drawer: getNavDrawer(context),
    );
  }
}

import 'package:flutter/material.dart';

class AccountScreen extends StatelessWidget {
  static const String routename = "/account";
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Center(
          child: new Text("Account"),
        ),
      ),
      body: new Container(
        child: new Center(
          child: new Text("Account Screen"),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class SettingsScreen extends StatelessWidget {
  static const String routename = "/settings";
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Center(
          child: new Text("Settings"),
        ),
      ),
      body: new Container(
        child: new Center(
          child: new Text("Settings Screen"),
        ),
      ),
    );
  }
}

相关文章

  • Flutter Example Drawer

  • Reference Link

    Flutter For iOS Flutter diff iOS Flutter example Flutter QA

  • Flutter Drawer

    如果你想要在抽屉中跳转其他页面并且返回时隐藏抽屉。那么您需要在跳转页面之前添加:Navigator.of(cont...

  • Flutter界面 - 边栏

    Flutter界面 - 边栏 1. Drawer 添加使用一个Drawer左侧边栏部件 2. DrawerH...

  • Flutter 手动控制drawer(抽屉)打开关闭

    Flutter 手动控制drawer(抽屉)打开关闭 PS:介绍两种方法可以设置drawer的打开: Global...

  • Flutter Drawer(抽屉菜单)

    Drawer(抽屉菜单)即通过右侧/左侧滑出来的菜单栏。在 Flutter 里使用的是 Drawer 组件。 使用...

  • Fluter:抽屉效果

    效果图 flutter的抽屉效果是使用Drawer组件实现的 Drawer可以添加头部属性: tabbar底部导航...

  • flutter

    flutter create --template=app example 创建example代码

  • flutter drawer的使用

    简介这篇文章主要讲解有关drawer的一切。 初探我们先来看看简单的drawer在Flutter的应用 可以看到,...

  • Flutter之drawer详细分析

    1. 简介 这篇文章主要讲解有关drawer的一切。 2. 初探 我们先来看看简单的drawer在Flutter的...

网友评论

      本文标题:Flutter Example Drawer

      本文链接:https://www.haomeiwen.com/subject/vcgkqqtx.html