第2节:Flutter的Hello World
本节学习内容:分别通过多种方法实现Hello world! ,让您对Flutter有一个初步的认识!
本节学习用时:3分钟
本节学习方式:推荐直接看懂代码即可
本节目录:
一、本节内容介绍
二、本节代码解释
一、本节内容介绍
1、本节代码
本节所有代码文件为:main.dart
。
您可自己通过
flutter create helloworldproject
创建helloworldproject项目后,将其lib文件夹下的代码文件替换为如下即可。
1.1、其中完整的main.dart
代码如下:
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、代码说明
略
Last updated
Was this helpful?