flutter从极简一步步增加 - 图2

极简起步

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(Text("hello world",
  5.         textAlign: TextAlign.center,));
  6.   //textAlign: TextAlign.center是不能少的，少了会报错
  7. }

提取组件

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(MyApp());
  5.   //textAlign: TextAlign.center是不能少的，少了会报错
  6. }
  8. //分离出MyApp
  9. class MyApp extends StatelessWidget {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Text(
  13.         "hello6",
  14.         textAlign: TextAlign.center,);
  15.   }
  16. }

分离文件

提取出myApp.dart

  1. import 'package:flutter/material.dart';
  3. class MyApp extends StatelessWidget {
  4.    @override
  5.   Widget build(BuildContext context) {
  6.     return Text(
  7.         "hello6",
  8.         textAlign: TextAlign.center,);
  9.   }
  10. }

main.dart文件内容

  1. import 'package:flutter/material.dart';
  2. import 'package:myapp/myApp.dart';
  4. void main() {
  5.   runApp(MyApp());
  6. }

引入Center

myApp.dart文件内容

  1. import 'package:flutter/material.dart';
  3. class MyApp extends StatelessWidget {
  4.    @override
  5.   Widget build(BuildContext context) {
  6.     return Center(
  7.       child: Text(
  8.         "hello",
  9.         textAlign: TextAlign.center,
  10.         textDirection: TextDirection.rtl,
  11.       ),
  12.     );
  13.   }
  14. }

引入scaffold

引入scaffold同时必须引入MaterialApp，否则会报错

  1. import 'package:flutter/material.dart';
  3. class MyApp extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return MaterialApp(
  7.         home: Scaffold(
  8.             body: Center(
  9.       child: Text(
  10.         "hello",
  11.         textAlign: TextAlign.center,
  12.         textDirection: TextDirection.rtl,
  13.       ),
  14.     )));
  15.   }
  16. }

操作中存在的问题

编写极简示例的过程中，一些代码变化不能成功热更新，这个时候可以重新启动
修改主文件以外的文件造成的代码变化，不能触发热更新，需要ctr+F5，引发热更新，如果热更新不能体现代码变化，尝试重新启动