Flutter 画圆环

Flutter 画圆环,见代码

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(
      title: 'test',
      home: Stack(
        children: const [
          Align(
            alignment: AlignmentDirectional.center,
            child: CircleAvatar(
              radius: 300,
              backgroundColor: Colors.black,
            ),
          ),
          Align(
            alignment: AlignmentDirectional.center,
            child: CircleAvatar(
              radius: 250,
              backgroundColor: Colors.red,
            ),
          ),
           Align(
            alignment: AlignmentDirectional.center,
            child: CircleAvatar(
              radius: 200,
              backgroundColor: Colors.orange,
            ),
          ),
          Align(
            alignment: AlignmentDirectional.center,
            child: CircleAvatar(
              radius: 150,
              backgroundColor: Colors.blue,
            ),
          ),
          Align(
            alignment: AlignmentDirectional.center,
            child: CircleAvatar(
              radius: 100,
              backgroundColor: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

运行效果

 

 

 

 

 

posted on 2021-12-28 10:27  小小程序员的梦想  阅读(843)  评论(0编辑  收藏  举报

导航