从零开始写第一个Flutter app（一）——Hello World

目录

• 从零开始写第一个Flutter app（一）——Hello World
• 从零开始写第一个Flutter app（二）——引用第三方包
• 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget
• 从零开始写第一个Flutter app（四）——无限滑动的ListView
• 从零开始写第一个Flutter app（五）——ListView添加图标
• 从零开始写第一个Flutter app（六）——添加点击事件交互
• 从零开始写第一个Flutter app（七）——弹出toast
• 从零开始写第一个Flutter app（八）——修改主题颜色
• 从零开始写第一个Flutter app（九）——route跳转新页面
• 从零开始写第一个Flutter app（十）——最终代码

准备

• 环境搭建参考这篇文章Flutter SDK下载安装及环境变量配置
• Flutter和Dart相关插件安装参考这篇文章Android Studio安装Flutter plugin和Dart plugin
• 创建项目参考这篇文章创建和运行第一个Flutter项目

Hello World

根据创建和运行第一个Flutter项目这篇文章创建一个项目，但是这个项目的代码稍多，对于刚入门的人来说稍显复杂，我们今天只要演示一个简单的Hello World，在主界面中间显示Hello World，太难的话会被吓到，打击大家学习的热情

只需要把原来的lib/main.dart文件下的所有内容替换成如下内容

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

然后运行，就可以看到如下结果

代码说明

• import 'package:flutter/material.dart';语句导入material包，下面代码会用到这个包里面的类

• void main() => runApp(MyApp());语句是程序的主入口，传入一个MyApp对象，这句话是Dart语言简化的写法，还可以写成

void main() {
  runApp(MyApp());
}

MyApp()写法其实是省略了new，所以还可以写成如下

void main() {
  runApp(new MyApp());
}

• StatelessWidget是Futter中的一种无状态的控件，另一种有状态的控件是StatefulWidget，这一设计理念是参考了React，对于这些东西刚开始不必抠细节太过于深究，一开始先照着敲代码先学会怎么用
• 继承StatelessWidget的类需实现build方法，该方法返回一个Widget控件，这里我们返回一个MaterialApp
• MaterialApp里可以设置title和home主页面
• body我们返回一个Scaffold，在Scaffold中可以设置appBar及body内容
• body中居中显示一个Text，内容为Hello World