Hello Flutter!(编写你的第一个 Flutter App)

版权声明：除注明转载或参考的文章皆为原创，转载请注明出处。 https://blog.csdn.net/weixin_43910980/article/details/88865445

首先你要有dart 的基础
编写你的第一个 Flutter App
参照着上面的学习 可以自己动手写一个

通过 flutter new object创建的MyApp

等待所有文件生成 其中在这里我们只需要关注lib 文件夹下的 main.dart flutter启动的入口

连接好设备（sm c7000设备名） 启动项目（flutter run）

准备好自己动手开发了吗？
wait! 在创建前先思考一下Flutter应用到底是由哪些组成的呢 首先有个宏观的认知后再去动手~

Widgets 内置自定义的Flutter UI widgets
State 应用的state管理里的数据变化 包括数据解析和创建动画效果
Material Design 告诉定制化的设计系统 高质量产品体验
User Interaction and gestures 学习用户交互和手势识别 以及这些交互如何触发state的的改变
Packages 可复用的代码库服务 减少编码工作 eg:http调用库 json解析库

开始重新编辑main.dart

flutter应用的入口是main函数
先来打印一下

void main(){
print('Hello Flutter');
}

import 'package:flutter/material.dart';

void main(){
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,//消除debug标志
home:Scaffold(
appBar:AppBar(
title: Text('MyFlutterApp'),
backgroundColor: Colors.blueAccent,
),
body:Container(
color: Colors.lightGreenAccent,
)
),
),
);
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: YanNan(),
appBar: AppBar(
title: Text('雁南呐!!!~~~'),
backgroundColor: Colors.blueAccent,
),
),
// theme: new ThemeData(
//   primaryColor: Colors.greenAccent,
// ),
);
}
}

class YanNan extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.pinkAccent,
height: 300.0,
width: 300.0,
child: Center(
child: Text('HELLO YANNANNA!!!!!!',
style: TextStyle(
fontSize: 20.0,
color: Colors.yellow,
)),
)));
}
}

通过修改某个title 在终端输入r 进行热重载 瞬间更新效果