2-5写一个HelloWorld程序
Flutter upgrade:cmd控制台中运行Flutter upgrade，升级flutterSDK
Flutter doctor 查看flutterSDK版本
flutter中的快捷键
r：点击后热加载，直接查看预览效果
p：在虚拟机中显示网格
o：切换Android和iOS的预览模式
q：退出调试预览模式
//谷歌推出的扁平化样式 大气美观
import 'package:flutter/material.dart';
//入口文件
void main() => runApp(MyApp());
//定义MyApp函数 继承静态的组件
class MyApp extends StatelessWidget {
// 重写build方法
@override
// 返回一个组件 传递一个上下文
Widget build(BuildContext context) {
return new MaterialApp(
title: "welcome to flutter",
home: new Scaffold(
appBar: new AppBar(
title: new Text("Hello Worldtitle"),
),
body: new Center(
child: new Text("Hello Worldbody"),
),
),
);
}
}
3-1节TextWidget文本组件
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//静态组建
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextWidget',
home: Scaffold(
appBar: AppBar(title: Text('TextWidget')),
body: Center(
child: Text(
'Flutter一切皆组件。Flutter一切皆组件。Flutter一切皆组件。Flutter一切皆组件。Flutter一切皆组件。',
// 居中对齐 left right start end(后两个工作不常用 和left right类似 运行效果差不多)
textAlign: TextAlign.center,
// 最大行数
maxLines: 1,
// 默认值 直接把文本截断
// overflow: TextOverflow.clip,
// 超出省略号 fade不常用 逐行颜色透明度减淡
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 25.0,
color: Color.fromARGB(255, 255, 150, 150),
// 下划线实线
decorationStyle: TextDecorationStyle.solid,
decoration: TextDecoration.underline),
)),
),
);
}
}
3-2节ContainerWidget容器组件-1
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//静态组建
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextWidget',
home: Scaffold(
appBar: AppBar(title: Text('TextWidget')),
body: Center(
child: Container(
child: new Text(
'Hello Imooc',
style: TextStyle(fontSize: 40.0),
),
// 底部居左对齐 第一个值为垂直方向 第二个值为水平方向
// alignment: Alignment.bottomLeft,
// 垂直居中水平向左对齐
alignment: Alignment.centerLeft,
// 宽高颜色
width: 500.0,
height: 400.0,
color: Colors.lightBlue,
)),
),
);
}
}
3-3节 ContainerWidget容器组件-2
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//静态组建
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextWidget',
home: Scaffold(
appBar: AppBar(title: Text('TextWidget')),
body: Center(
child: Container(
child: new Text(
'Hello Imooc',
style: TextStyle(fontSize: 40.0),
),
alignment: Alignment.bottomLeft,
width: 500.0,
height: 400.0,
// 内边距20
// padding:const EdgeInsets.all(20.0),
// 分别设置上下左右的边距
padding: const EdgeInsets.fromLTRB(10.0, 0, 0, 59.0),
// 外边距
margin: const EdgeInsets.all(10.0),
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.lightGreen, Colors.purple, Colors.amber]),
),
)),
),
);
}
}
由于简书使用的少 格式过于简陋 欢迎访问我本人的思否博客查看本文：https://segmentfault.com/a/1190000023068940
