Flutter Scaffold的详细解说

Flutter Scaffold的详细解说

Flutter是蝴蝶翩翩，Scaffold是实现MaterialDesign布局，只要用Material Design都可以用Scaffold来进行绘制；

1.Scaffold的组件描述

2.代码例子

2.1 例子1 

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title:Text("大成首页")
    ),
    body: Center(

      child: Column(

        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '大成主页',
            style: TextStyle(fontSize: 34.0),

          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: (){
        Navigator.pushNamed(context, '/first');
      },
      tooltip: "进入下一页",
      child: Icon(Icons.navigate_next),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

2.2 例子2 

err错误，没有填写Scaffold的这个组件提示着错误

代码全部为：

import 'package:flutter/material.dart';

//void main() => runApp(MyApp());
void main() => runApp(
  MaterialApp(
    title: "脚手架组件Scaffold By 大成",
    home: LayoutDemo(),
  )
);

class LayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
    appBar: AppBar(
      title: Text("Scaffold 脚手架 by 大成")
    ),
    body:Center(
       child: Text('Scaffold 脚手架',
       style: TextStyle(fontSize: 28.0),
       ),
    ),
    bottomNavigationBar: BottomAppBar(
      child: Container(height: 50.0, width: 30.0,),
    ),

    floatingActionButton:FloatingActionButton(
      onPressed: (){},
      tooltip: '增加Add',
      child:Icon(Icons.add),
    ),

    floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,
    );
  }
}