flutter UI笔记（一）

关于flutter ，需要知道的框架：

截屏2022-05-17 下午4.02.56.png

新建项目，执行以下命令：

flutter create projectName
cd projectName
flutter run

现在，删除项目main.dart代码，

带导航页面代码

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({super.key,required this.title});

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Center(
        child: Text('context page text'),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'web title',
      theme: ThemeData(primarySwatch: Colors.green),
      home: const MyHomePage(title: 'navigation-title'),
    );
  }
}

void main(List args) {
  runApp(const MyApp());
}

运行效果（导航页面）：

Simulator Screen Shot - iPhone 13 Pro Max - 2022-05-17 at 16.08.14.png

不带导航页面代码

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.white),
      child: const Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}


void main(List args) {
  runApp(const HomePage());
}

运行效果（无导航页面）

Simulator Screen Shot - iPhone 13 Pro Max - 2022-05-17 at 16.06.09.png

这里，了解有状态widget和无状态widget（StatefulWidget、StatelessWidget）。
程序入口 main函数