使用MaterialApp和Scaffold组件

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const Center(
          child: Text(
            'Hello World',
            textDirection: TextDirection.ltr,
            style: TextStyle(
              color: Colors.red,
              fontSize: 40,

            ),
          ),
        )
    ),
  ));
}

Flutter把内容单独抽离成一个组件

在Futter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget

前期我们都继承StatelessWidget。后期给大家讲StatefulWidget的使用。

Statelesswidget 是无状态组件，状态不可变的widget

StatefulWidget 是有状态组件，持有的状态可能在widget生命周期改变

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('你好，我是一个自定义组件'),
          ),
          body: const Center(
            child: Text(
              'Hello World',
              textDirection: TextDirection.ltr,
              style: TextStyle(
                color: Colors.red,
                fontSize: 40,
              ),
            ),
          )
      ),
    );
  }
}