flutter_qucikstart

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

开发细节注意

布局

scaffold home 主视图拆成函数
颜色放在common里统一管理，使用class静态属性调用
不同结构使用注释标识，使用end结尾结构更清楚

导入资源和图片

固定写法 assets/images/3.0x flutter自动适配几倍图
在pubspec中导入资源，在commont新建assets类管理资源
使用stack进行叠加，使用aligment进行对齐管理

字体和文本设置

导入字体，设置family和路径，以及不同字体对应的字重
text，使用style配置样式，fontsize是字体大小，height是行高，是个比值，使用具体的行高值/字体大小

增加倒计时

将无状态组件转成有状态组件，信息变化
使用future.delayed实现倒计时，注意使用async
使用三目运算符控制显示
将相同组件抽出

图片自适应

在main中使用theme设置全局样式
在padding中使用edgeinsets.symmetric设置水平间距
image中，使用fit Boxfit来设置宽高适配

导航，布局

从上到下，从左到右分析布局
写布局前，先把结构列好，用函数拆分，用_bulid开头，表示私有布局函数
在使用elevatedbutton时，使用style将样式还原，在外面套一层Container作为装饰，更方便配置
使用Navigator.pushReplacement 替换路由

表单

表单TextField通过textfield.decoration进行装饰
使用prefixIcon、suffixIcon设置前置、后置图标
一些简单的验证可以放在TextField的onChanged中
注意在涉及到更新状态时，使用setState

按钮组件

抽取公共组件，放在commont里
公共组件外露的属性，使用final修饰，并在构造函数中

2.2 KiB Raw Blame History Unescape Escape