快速生成无状态模板

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container( );
}
}

快速生成有状态模板

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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
} class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container( );
}
}

1.MaterialApp

脚手架模板

有状态

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
} class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("测试"),
),
body:Center(child: Text('data'),)
),
);
}
}

2.Scaffold

3.AppBar

return Scaffold(
appBar: AppBar(
leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}),
title: Text('AppBar'),
actions: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: () {}),
IconButton(icon: Icon(Icons.add), onPressed: () {}),
flexibleSpace: Container(
color: Colors.red,
),
bottom: PreferredSize(
child: Container(
height: ,
width: double.infinity,
color: Colors.grey,
child: Text('bottom'),
),
preferredSize: Size(, ),
),
),
);

4.文本框

new Text('文本框');

属性

监听一

onChanged:每次改变接受文本的值

onSubmitted:每次按输入法的确定键接收一个值

监听二

4.按钮

        child: new MaterialButton(
onPressed: null,
child: new Text('按钮'),
color: Colors.blue,
),

 

5.弹出提示

        child: new MaterialButton(
onPressed: (){
Scaffold.of(context).showSnackBar(
new SnackBar(content: new Text("提示信息:")));
},
child: new Text('按钮'),
color: Colors.blue,
),

输入框

new TextField(
//
);

6.toast

依赖  fluttertoast: ^2.1.1

import 'package:fluttertoast/fluttertoast.dart';

MaterialButton(
child: Text("a"),
onPressed: (){
Fluttertoast.showToast(
msg: "This is Center Short Toast",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIos: , );
},
);

7.加载中

flutter_spinkit: ^3.1.0

import 'package:flutter_spinkit/flutter_spinkit.dart';

SpinKitFadingCircle(
itemBuilder: (_, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven ? Colors.red : Colors.green,
),
);
},
);

8.TabBar

unselectedLabelColor: 设置未被选中的标签颜色

indicatorColor:选中标签的下划线颜色

indicatorSize:选中下划线的长度

.主题

splashColor:水波纹颜色

.装饰盒子

decoration:BoxDecoration(

)

border:设置边框

borderRadius:圆角设置

borderShdow:阴影

..shape:形状

..gradient:渐变

image:

sizeBox

固定尺寸盒子

alignment

对齐

0.0表示居中

stack

叠加

AspectRatio 设置宽高比

pageView 翻页

SimpleDialog

AlertDialog

barrierDismissible 点外面不会取消对话框

bottomSheet 底部滑动

ExpansionPanel 收缩面板

chip

ActionChip

FilterChip

ChoiceChip

warp

Divider

分隔符

DataTable

stepper

RefreshIndicator 下拉

TabBarView

主题颜色

flutter ui的更多相关文章

  1. Flutter 即学即用系列博客——04 Flutter UI 初窥

    前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...

  2. Flutter UI系统

    我们可以看到,无论是Android SDK还是iOS的UIKit 的职责都是相同的,它们只是语言载体和底层的系统不同而已.那么可不可以实现这么一个UI系统:可以使用同一种编程语言开发,然后针对不同操作 ...

  3. Flutter & UI system & GUI & API & SDK

    Flutter & UI system & GUI & API & SDK https://book.flutterchina.club/chapter14/flutt ...

  4. 2020年20个Flutter最漂亮的UI库和项目

    Best-Flutter-UI-Templates 地址:https://github.com/mitesh77/Best-Flutter-UI-Templates The History of Ev ...

  5. Flutter 初尝:从 Java 无缝过渡

    准备阶段 下载 Flutter SDK 新建 Flutter 文件夹,克隆 Flutter SDK: git clone -b beta https://github.com/flutter/flut ...

  6. Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

    前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...

  7. Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考

    背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞════════ ...

  8. Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)

    前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...

  9. Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)

    前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...

随机推荐

  1. JVM内存区域配置

    堆内存:新域+旧域 设置堆内存初始化大小 java -Xms128m 设置堆内存初始化大小128MB 设置堆内存最大大小 java -Xmx256m 设置堆内存最大256MB 通常将堆内存的初始化大小 ...

  2. Impala-1

    Impala相关操作上   阅读目录 序 数据库相关 表相关 系列索引 序 上一篇,我们介绍Impala的介绍及安装.   下面我们开始继续进一步的了解Impala的相关操作. 数据库相关 一:创建 ...

  3. C#中的SubString()的用法

    先看语法: String.SubString(int index,int length)     index:开始位置,从0开始       length:你要取的子字符串的长度 例子: using ...

  4. (转载)Java中如何遍历Map对象的4种方法

    在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...

  5. C# 获取ORACLE SYS.XMLTYPE "遇到不支持的 Oracle 数据类型 USERDEFINED"

    1.需要加函数 2.需要加表别名 select   a.XML.getclobval()  from TB1  a

  6. ACM International Collegiate Programming Contest, Egyptian Collegiate Programming Contest (ECPC 2015)

    A.Arcade Game(康拓展开) 题意: 给出一个每个数位都不同的数n,进行一场游戏.每次游戏将n个数的每个数位重组.如果重组后的数比原来的数大则继续游戏,否则算输.如果重组后的数是最大的数则算 ...

  7. SDOI 2009 学校食堂 状压dp

    这个题的关键处1 紧跟着他的bi个人 —— 由此得出任意一个状态都可以表示为 有第一个人没吃到饭做分隔的前面所有人已吃饭,并用1<<8表示之后的(包括他)的八个人的状态2 信息仍然是上一个 ...

  8. mybatis学习(七)——resultType解析

    resultType是sql映射文件中定义返回值类型,返回值有基本类型,对象类型,List类型,Map类型等.现总结一下再解释 总结: resultType: 1.基本类型  :resultType= ...

  9. POJ3159:Candies(差分约束)

    Candies Time Limit: 1500MS   Memory Limit: 131072K Total Submissions: 39666   Accepted: 11168 题目链接:h ...

  10. socket编程 ------ 建立 TCP 服务器和客户端流程(阻塞方式)

    服务器端: 服务器端先创建一个socket,然后把这个socket绑定到端口上,接着让它向tcp/ip协议栈请求一个监听服务并创建一个accept队列来接受客户端请求. void creat_tcpS ...