前端入门flutter-03Flutter目录结构介绍、入口、自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件

　　上一篇简略的学习了dart语言，接下来是改学fluter项目开发了。对于需要看到界面和效果的单单看文章是无法满足我这种空间思维不足的人的，所以我决定去找视频，经过多番筛选我选择了哔哩哔哩里面的：https://www.bilibili.com/video/BV1S4411E7LY?from=search&seid=8726264336451919734。

　　由于我之前是看过dart语言了，所以直接跳到18集开始肝，首先了解Flutter目录结构、入口、自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件。

　　

import 'package:flutter/material.dart';//接入Material UI
 
void main(){
  runApp(MyApp());
}
 
//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class  MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
    );
  }
}
 
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
     child:Text(
      "Hellow Flutter",
      //从左到右
      textDirection:TextDirection.ltr ,
      //样式
      style: TextStyle(
        fontSize: 24,
        color: Colors.lightBlue,
      ),
    ),
  );
  }
}