flutter 常用笔记 设置导航颜色两种方式，contaner圆角图片和圆形图片的使用

1.dart 文件必须引入；

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

2.自定义MyApp 类

2.1 MaterialApp 可以配置导航颜色

2.2 Scaffold 的 AppBar 可以配置导航颜色

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.pink, //可以配置导航颜色
      ),
      home: FirstPage('这是首页'),
    );
  }
}

class FirstPage extends StatefulWidget {
  String title = '';
  FirstPage(this.title, {Key? key}) : super(key: key);
  @override
  State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leadingWidth: 200,
        leading: GestureDetector(
          onTap: () => {
            {
              {
                {{}}
              }
            }
            // setState(
            //   () => {count++},
            // )
          },
          child: Row(
            children: const [
              SizedBox(
                width: 16,
              ),
              Icon(
                Icons.location_on,
                size: 20,
              ),
              Text(
                '哈尔滨',
                style: TextStyle(
                  fontSize: 16,
                ),
              ),
            ],
          ),
        ),
        title: Text(
          widget.title,
        ),
        actions: const [
          Padding(
            padding: EdgeInsets.only(right: 16.0),
            child: Icon(Icons.fiber_new_sharp),
          ),
        ],
        // foregroundColor: Colors.white, // 设置导航文字颜色
        // backgroundColor: Colors.green,// 设置导航颜色
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(height: 32),
            MyCount(count),
            const SizedBox(height: 16),
            const ImgBgCircle(),
            const SizedBox(height: 16),
            const MyClipOval(),
            const SizedBox(height: 16),
            const MyAssetImg(),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.green,
        onPressed: () => {
          setState(
            () => {count++},
          )
        },
        child: const Icon(
          Icons.add,
          size: 30,
        ),
      ),
    );
  }
}

3.container 实现圆行附片的效果

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(75),
        image: const DecorationImage(
          fit: BoxFit.cover,
          // image: NetworkImage(
          //   'https://images.ofweek.com/Upload/News/2017-11/25/WooVergil/1511574357832080801.png',
          // ),
          image: AssetImage('images/c.png'),
          alignment: Alignment.center,
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        'https://pics3.baidu.com/feed/902397dda144ad34a3c51a20dcc8b3f330ad8595.jpeg?token=88196e12072d8edd3d02cf18ccbebdfa&s=95224BB1384206DA0529A59C030030CB',
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('images/c.png'),
      color: Colors.pink,
    );
  }
}