安科网

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

apowerfulman

apowerfulman

2019-07-01

关注 关注

1 MaterialApp

1.1 什么是MaterialApp？

MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的<html></html>，且它自带路由、主题色，<title>等功能。

1.2 MaterialApp的几个属性

1.2.1 title

Strig类型，该属性会在Android应用管理器的App上方显示，对于iOS设备是没有效果的。如下面代码所示：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Text('hello flutter',
          style: TextStyle(
              color: Colors.white, decoration: TextDecoration.none))));
}

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

1.2.2 home

Widget类型，这是在应用程序正常启动时首先显示的Widget，除非指定了initialRoute。如果initialRoute显示失败，也该显示该Widget。

需要注意的是, 如果你指定了home属性，则在routes的路由表中不允许出现/的命名路由。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Center(
        child: Text('hello flutter',
            style: TextStyle(
                color: Colors.white, decoration: TextDecoration.none)),
      )));
}

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

1.2.3 routes

Map<String, WidgetBuilder>类型，是应用的顶级路由表。当我们再使用Navigator.pushNamed进行命名路由的跳转时，会在此路表中进行查找并跳转。如果你的应用程序只有一个页面，则无需使用routes，直接指定home对应的Widget即可。

下面的例子中，定义了两个路由：/home和/detail，并使用GestureDetector定义了点击事件已实现路由跳转：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(title: '一个Flutter应用', home: HomePage(), routes: {
    '/home': (BuildContext context) => HomePage(),
    '/detail': (BuildContext context) => DetailPage()
  }));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, '/detail');
            },
            child: Text('首页，点击跳转详情页',
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.white, decoration: TextDecoration.none))));
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, '/home');
            },
            child: Text('详情页，点击跳转首页',
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.white, decoration: TextDecoration.none))));
  }
}

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

2 Scaffold

2.1 什么是Scaffold?

Scaffold通常被用作MaterialApp的子Widget，它会填充可用空间，占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能，例如顶部的appBar，底部的bottomNavigationBar，隐藏的侧边栏drawer等。

2.2 Scaffold的几个属性

2.2.1 appBar

PreferredSizeWidget类型，显示在Scaffold的顶部区域。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用', 
      home: Scaffold(
        appBar: AppBar(
          title: Text('首页'))
        )
      )
  );
}

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

2.2.2 drawer

Widget drawer类型，通常用来形成一个汉堡包按钮显示其侧边栏。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(title: Text('首页')),
          drawer: Drawer(
              child: Column(
            children: <Widget>[
              DrawerItem(1, '列表1'),
              DrawerItem(2, '列表2'),
              DrawerItem(3, '列表3'),
              DrawerItem(4, '列表4'),
              DrawerItem(5, '列表5')
            ],
          )))));
}

class DrawerItem extends StatelessWidget {
  final int id;
  final String name;

  DrawerItem(this.id, this.name);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border:
            Border(bottom: BorderSide(width: 0.5, color: Color(0xFFd9d9d9))),
      ),
      height: 52.0,
      child: FlatButton(
          onPressed: () {},
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[Text(id.toString()), Text(' - '), Text(name)],
          )),
    );
  }
}

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

2.2.3 bottomNavigationBar

Widget bottomNavigationBar类型，用户显示底部的tab栏，items必须大于2个。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(
            title: Text('首页'),
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: 1,
            items: [
              new BottomNavigationBarItem(
                  icon: Icon(Icons.account_balance), title: Text('银行')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.contacts), title: Text('联系人')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.library_music), title: Text('音乐'))
            ],
          ))));
}

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

2.2.4 body

Widget类型，Scaffold的主题内容。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(
            title: Text('首页'),
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: 1,
            items: [
              new BottomNavigationBarItem(
                  icon: Icon(Icons.account_balance), title: Text('银行')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.contacts), title: Text('联系人')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.library_music), title: Text('音乐'))
            ],
          ),
          body: Center(
            child: Text('这是联系人页面'),
          ),
      )));
}

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

flutter 路由 material

apowerfulman

apowerfulman

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

效率王者！五大工具软件包助力高效Flutter开发

本文转载自公众号“读芯术”。开发Flutter应用程序时，无法读取日志是一个大问题，因为我们无法根据问题的严重性来快速过滤日志。抛出异常还是记录简单的调试信息?看起来好像都一样。如果要在Flutter应用程序中做好日志记录，由Simon Leier设计的

csdnYF 2020-11-15

使用Flutter创建App

使用流行的 Flutter 框架开始你的跨平台开发之旅。Flutter是一个深受全球移动开发者欢迎的项目。该框架有一个庞大的、友好的爱好者社区，随着 Flutter 帮助程序员将他们的项目带入移动领域，这个社区还在继续增长。阅读之后，你将了解如何快速安装和

SemiraChen 2020-10-10

使用Flutter完成10个商业项目后的经验教训

在过去的24个月中，我们花费 17.193,00 个小时使用 Flutter 完成了10个商业应用程序，本文将分享我们的见解。选择Flutter的原因是什么？与Xamarin相比，Flutter的表现如何？从2019年5月开始，我们决定Flutter将是我

YejiaSun 2020-09-27

flutter hello world

在surface pro4上不知道怎么弄好了Flutter了，运行成功在redmi k30 pro手机上了，结果跑到神舟精盾本本上再弄一次又出问题了，每次搭建flutter环境总是出问题，郁闷，写个博客记录下来碰到的问题，便于以后查询！！！图2一番查询，终

csdnYF 2020-09-20

Kotlin vs Flutter，我到底应该怎么选？

在移动应用开发方面，Kotlin和Flutter是目前比较火热的两门技术。其中，Kotlin是由Jetbrains研发，后被Google大力扶持，Flutter则是由Google自己独立研发的。从目前Google官方的态度来看，这两门技术都被无限看好，Go

FrankAbagnale 2020-09-15

2020年排名前10的Flutter和React Native UI库

如今，Flutter在移动技术中扮演着非常重要的角色。移动技术的选择已经变得非常关键，Flutter提高了生产率，Flutter已被许多公司采用。一些例子如阿里巴巴、谷歌等很多大公司都在提供世界级的flutter开发服务。React Native帮助我们借

wmd看海 2020-07-27

APP 开发从 0 到 1（一）需求与准备

在《手把手教你做个人 app》我有说过，开发一个 APP 很大程度依赖服务端：服务端提供接口数据，然后 APP 展示；开发一个 APP，还需要美工协助切图。对于以前的我，没接口，没美工，照样可以开发 APP ，可谓 So easy 来形容。现在的我，依旧一

szintu 2020-07-05

flutter-搜索条

asset.dart相当于数据文件，工作中这些数据是后台传递给我们，或者写成配置文件的，这里我们就以List的方式代替了。searchList : 这个相当于数据库中的数据，我们要在这里进行搜索。recentSuggest ： 目前的推荐数据，就是搜索时，

chaoxiao 2020-07-04

Flutter开发环境搭建

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，可以将如下环境变量加入到环境变量中:. 将安装包zip解压到你想安装Flutter SDK的路径。该命令检查您的环境并在终端窗口中显示报告。在Android St

wmd看海 2020-06-27

Flutter开发初探

目前跨端开发比较热门的就是 React Native 和 Flutter 了，到底该选哪门技术似乎也快成了大前端圈的一个热门话题。对于web前端来说，基于web生态的 React Native 应该是一个更加顺畅而自然的选择；但 Flutter 让人动心的

龙衣 2020-06-26

【Flutter实战】移动技术发展史

目前智能手机的发展趋势是充分加入了人工智能、5G等多项专利技术，使智能手机成为了用途最为广泛的专利产品。2008年12月2日，塞班公司被诺基亚收购。2011年12月21日，诺基亚官方宣布放弃塞班品牌。2011年9月27日，微软发布升级版Windows Ph

龙衣 2020-06-09

Flutter - primarySwatch自定义颜色

一般新建了一个Flutter项目，`primarySwatch`颜色被设置成`Colors.blue`，如果我们想要自定义一个HEX值，那么你可能会想到使用。不过这样是编译不过的。因为`primarySwatch`是`MarerialColor`类型，而刚

龙衣 2020-06-08

Flutter 建立项目和编写入口文件

在你的电脑上找一个喜欢的位置，建立一个文件夹。当看到ALL Done字样的时候，就说明项目建立好了。然后进入lib目录下，可以看到一个main.dart文件，打开这个文件，清空原有代码，写入下面的代码，代码写完后，记得在main.dart,用impoart

wmd看海 2020-06-04

Flutter 入口页面及底部导航栏实例制作

material风格： Material Design 是由Google推出的全新设计语言，这种设计语言是为手机、平板电脑、台式机和其他平台提供一致，更广泛的外观和感觉。我喜欢称它为纸墨设计。Material Design 风格是一种非常有质感的设计风格，

Samlss 2020-06-04

Flutter Weekly Issue 58

A responsive tabs demo at two different screen size namely tablet and phone.A Flutter package to detect up, down, left, right sw

wmd看海 2020-06-04

几天时间用Flutter敲了个新浪微博

谷歌在2018年12月正式发布了Flutter，这是一个出色的跨平台框架，可用于移动、桌面和 Web 平台构建应用程序，发布不到一年，它的流行度就超过了React Native以及同领域的产品。相比其他选项，Flutter有着许多独有的优势。除了性能表现之

csdnYF 2020-05-30

开源！有人用Flutter撸了个新浪微博

谷歌在2018年12月正式发布了Flutter，这是一个出色的跨平台框架，可用于移动、桌面和 Web 平台构建应用程序，发布不到一年，它的流行度就超过了React Native以及同领域的产品。相比其他选项，Flutter有着许多独有的优势。这些优势融入了

androidgjw 2020-05-28

Flutter 持久化_shared_preferences

购物车中的一项功能是持久化，就是我们关掉APP，下次进入后，还是可以显示出我们放入购物车的商品。Flutter提供了三种持久化工具，数据库sqflite、shared_preferences、文件file。但是这些商品不和后台进行数据交互，前台如果使用sq

wmd看海 2020-05-28

Flutter的环境配置以及一些常见问题

flutter是Google推出的基于Dart语言开发的跨平台开源UI框架，能够支持安卓与iOS。若在上述网址中无法顺利下载，也可以去flutter的github下载，注意，github上flutter包含不稳定的测试版，目前flutter-1.17.0-

wmd看海 2020-05-19

Flutter (windows环境下的)安装与启动

首先按照 官方文档 所提供的说明配置flutter环境变量，下载flutter sdk包，推荐下载1.17.0版本，配置对应path路径；第二个坑，创建第一个项目，如果有梯子，可以直接运行；没有，那就需要配置了，以下。上边的MAVEN_REPO这个配置在f

csdnYF 2020-05-16
apowerfulman

apowerfulman

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号