Flutter :如何创建百分比跟踪器

import 'package:flutter/widgets.dart';

class PercentageTracker extends StatefulWidget {
  @override
  _PercentageTrackerState createState() => _PercentageTrackerState();
}

class _PercentageTrackerState extends State<PercentageTracker> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        // 在这里可以获取到父容器的尺寸
        double parentWidth = constraints.maxWidth;
        double parentHeight = constraints.maxHeight;

        // 在这里根据百分比计算子组件的尺寸
        double childWidth = parentWidth * 0.5; // 子组件宽度为父容器宽度的50%
        double childHeight = parentHeight * 0.8; // 子组件高度为父容器高度的80%

        // 返回子组件
        return Container(
          width: childWidth,
          height: childHeight,
          color: Colors.blue,
        );
      },
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Percentage Tracker Example'),
        ),
        body: Center(
          child: PercentageTracker(),
        ),
      ),
    );
  }
}