第2节：Flutter的Hello World

本节学习内容：分别通过多种方法实现Hello world! ，让您对Flutter有一个初步的认识！

本节学习用时：3分钟

本节学习方式：推荐直接看懂代码即可

本节目录：

一、本节内容介绍

二、本节代码解释

一、本节内容介绍

1、本节代码

本节所有代码文件为：main.dart。

您可自己通过flutter create helloworldproject创建helloworldproject项目后，将其lib文件夹下的代码文件替换为如下即可。

1.1、其中完整的main.dart代码如下：

import 'package:flutter/material.dart';

// 方法①
// >>>>>>>>>>>>> start >>>>>>>>>>>>>
// void main() => runApp(const Center(
//     child: Text('1.Hello, world! in Main', textDirection: TextDirection.ltr)));
// <<<<<<<<<<<<<  end  <<<<<<<<<<<<<


// 方法②
// >>>>>>>>>>>>> 方法② >>>>>>>>>>>>>
// void main() => runApp(MyApp());

// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return const Center(
//         child: Text('2.Hello, world! in MyApp return!', textDirection: TextDirection.ltr));
//   }
// }
// <<<<<<<<<<<<< 方法② <<<<<<<<<<<<<


// 方法③
// >>>>>>>>>>>>> 方法③ >>>>>>>>>>>>>
// void main() => runApp(MyApp());

// class MyApp extends StatelessWidget {
//    helloWorldPage() {
//      return Center(
//        child: Text('3.Hello world! in helloWorldPage',
//            textDirection: TextDirection.ltr),
//      );
//    }

//    @override
//    Widget build(BuildContext context) {
//      return helloWorldPage();
//  }
// }
// <<<<<<<<<<<<< 方法③ <<<<<<<<<<<<<


// 方法④
// >>>>>>>>>>>>> 方法④ >>>>>>>>>>>>>
void main() => runApp(MyApp());

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

class HelloWorldPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('4.Hello world! in HelloWorldPage',
          textDirection: TextDirection.ltr),
    );
  }
}
// <<<<<<<<<<<<< 方法④ <<<<<<<<<<<<<

2、代码说明

略