Flutter学习笔记（1）—— 从主界面开始撸起

最近在写一个记事App，也是感觉自己写了一段时间的flutter了，所以开始写一些flutter的开发经历。

1. 创建一个启动类NoteApp

main.dart

import 'package:flutter/material.dart';

import 'utils/life_color.dart';
import 'views/index_page.dart';

void main() => runApp(NoteApp());

class NoteApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: IndexPage(),
    );
  }
}

2. 创建首页IndexPage

index_page.dart

import 'package:flutter/material.dart';
import 'package:life_note/utils/life_color.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        child: AppBar(
          title: Text('待办事项'),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.search), onPressed: () {}),
            IconButton(icon: Icon(Icons.swap_vert), onPressed: () {}),
            IconButton(icon: Icon(Icons.menu), onPressed: () {}),
          ],
        ), 
        preferredSize: Size.fromHeight(120)
      ),
      drawer: Drawer(),
      body: Container(
        child: Column(
          children: getTodayTodoList(),
        ),
      ),
    );
  }
  
  getTodayTodoList() {
    List<Widget> todayToList = [];
    todayToList.add(Container(
      child: Column(
        children: <Widget>[
          Container(
            height: 30,
            alignment: Alignment.centerLeft,
            color: LifeColor.mainColor[100].withOpacity(0.5),
            padding: EdgeInsets.only(left: 20),
            child: Text('今日', style: TextStyle(color: LifeColor.mainColor),),
          )
        ],
      ),
    ));
    for (var i = 0; i < 5; i++) {
      todayToList.add(Container(
        height: 55,
        decoration: BoxDecoration(
          border: Border(bottom: BorderSide(color: Colors.black45, width: 0.1))
        ),
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.only(left: 20),
        child: Row(
          children: <Widget>[
            Text('I did someething $i')
          ],
        ),
      ));
    }
    return todayToList;
  }
  
}

这样就撸好一个基本的页面了。 总结一下，除了官网给出的案例，本文新增的特性：

1. AppBar设置高度是通过外部的PreferSized 这个widget来控制的

下期会继续完善项目