时间戳

首页 > 解决方案 > Flutter 容器覆盖小部件

flutter - Flutter 容器覆盖小部件

问题描述

我想用 Flutter 获得如下图所示的图像。我应该如何提供这个？我可以为它提供容器边框，但我想放一个 wigdet 而不是边框​​。例如，我想用 Circleprogress 栏包装一个圆形小部件。进度应该随着小部件的增长而增长

在此处输入图像描述

Stack(
  children: [
    Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
          color: context.themeCopyExtensions.backgroundColor,
          shape: BoxShape.circle,
          border: Border.all(width: 5),
          boxShadow: [
            BoxShadow(
                color: context.themeCopyExtensions.backgroundColor,
                blurRadius: 10)
          ]),
      child: ImagesHelper.imagesHelper.getAssetImage(imageName: "logo"),
    ),
  ],
);

标签： flutter

解决方案

我使用“Stack”小部件和“CircularProgressIndicator”实现。（需要调整每个小部件的大小）

在此处输入图像描述

/// Flutter code sample for CircularProgressIndicator

// This example shows a [CircularProgressIndicator] with a changing value.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    )..addListener(() {
        setState(() {});
      });
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              width: 300,
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  CircularProgressIndicator(
                    value: controller.value,
                    strokeWidth: 5,
                    semanticsLabel: 'Linear progress indicator',
                  ),
                  Container(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Color(0xFF431CEE),
                    ),
                    child: Icon(
                      Icons.audiotrack,
                      color: Colors.white,
                      size: 35,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

推荐阅读