Flutter：为 CircularProgressIndicator 指定大小

Flutter：为 CircularProgressIndicator 指定大小

在 Flutter 中，CircularProgressIndicator小部件，顾名思义，可以帮助您实现一个圆形进度指示器，让用户知道正在加载某些内容。此小部件不提供设置其大小的选项，如宽度、高度、半径等。事实上，CircularProgressIndicator 的大小取决于其父级。因此，我们可以通过简单地使用Container或SizedBox小部件来调整 CircularProgressIndicator 的大小。

注意：最好给Container或SizedBox提供等于高度的宽度。如果宽度和高度不同，则CircularProgressIndicator将变为椭圆。如果将CircularProgressIndicator放置在Center小部件或具有对齐的Container小部件中，则CircularProgress的大小将尽可能小，而不管其父级的大小。

编码：

// main.dart
import 'package:flutter/material.dart';

// Import the custom icon picker
import './custom_icon_picker.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner icon
      debugShowCheckedModeBanner: false,
      title: '大前端之旅（坚果）',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // selected icon
  // it will be shown if not null
  IconData? _selectedIcon;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('大前端之旅（坚果）')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(
              width: 200,
              height: 200,
              child: CircularProgressIndicator(
                color: Colors.blue,
                strokeWidth: 10,
              ),
            ),
            Container(
              width: 300,
              height: 300,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.amber),
              child: const CircularProgressIndicator(
                color: Colors.red,
                strokeWidth: 20,
              ),
            )
          ],
        ),
      ),
    );
  }
}

所以你学会了吗