如何在flutter中添加这样的背景

Question

我想添加具有圆圈的背景，如下图所示：

在我的 Figma 中，有这样的资产：

我的代码是这样的：

Widget buildArea(int index) => Card(
        color: ColorName.brandSecondaryBlue,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        child: Container(
          padding: const EdgeInsets.only(top: 20, bottom: 20),
          child: buildAreaItem(),
        ),
      );

还有谁知道怎么添加吗？

Answer 1

可能不是一种干净的方法，但请尝试使用Stack小部件并在内部使用Positioned小部件。

这是您要实现的目标的示例。

Scaffold(
        body: Center(
          child: Stack(
            children: [
              Container(
                width: 300,
                height: 150,
                decoration: BoxDecoration(
                  color: Colors.indigo,
                  borderRadius: BorderRadius.circular(20)
                ),
              ),
              
              Positioned(
                left: -50,
                top: -35,
                child: Stack(
                  alignment: AlignmentDirectional.center,
                  children:
                  [
                    Container(
                  width: 150,
                  height: 150,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(100)
                  ),),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          color: Colors.indigo,
                          borderRadius: BorderRadius.circular(100)
                      ),),

                  ]
                ))
            ],
          ),
        )
      )

Answer 2

试试这个代码：

import 'package:flutter/material.dart';
    import 'package:flutter/gestures.dart';
    import 'dart:ui';
    import 'package:google_fonts/google_fonts.dart';
    import 'package:myapp/utils.dart';
    
    class circlescreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        double baseWidth = 428;
        double fem = MediaQuery.of(context).size.width / baseWidth;
        double ffem = fem * 0.97;
        return Container(
          width: double.infinity,
          child: Container(
            // iphone13promax1auq (1:2)
            width: double.infinity,
            decoration: BoxDecoration (
              color: Color(0xff3241a0),
              borderRadius: BorderRadius.circular(20*fem),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Container(
                  // ellipse1hmV (1:4)
                  margin: EdgeInsets.fromLTRB(0*fem, 0*fem, 237*fem, 272*fem),
                  width: 318*fem,
                  height: 318*fem,
                  decoration: BoxDecoration (
                    borderRadius: BorderRadius.circular(159*fem),
                    border: Border.all(color: Color(0xff3c4baf)),
                  ),
                ),
                Container(
                  // ellipse3jCP (1:6)
                  margin: EdgeInsets.fromLTRB(0*fem, 0*fem, 0*fem, 113*fem),
                  width: 198*fem,
                  height: 198*fem,
                  decoration: BoxDecoration (
                    borderRadius: BorderRadius.circular(99*fem),
                    border: Border.all(color: Color(0xff3c4baf)),
                  ),
                ),
                Container(
                  // ellipse2oi3 (1:5)
                  margin: EdgeInsets.fromLTRB(0*fem, 0*fem, 205*fem, 0*fem),
                  width: 318*fem,
                  height: 318*fem,
                  decoration: BoxDecoration (
                    borderRadius: BorderRadius.circular(159*fem),
                    border: Border.all(color: Color(0xff3c4baf)),
                  ),
                ),
              ],
            ),
          ),
              );
      }
    }

Answer 3

导出仅包含背景（带圆圈的紫色）的 figma 组件。

然后将其添加到资产中并在 Card 的子项中使用它。 所以你的小部件树将是：

Card 
=> 
Container( //with background decoration as image and necessary padding if any
)
 =>
 buildAreaItem()

您还可以裁剪图像以仅获得顶角环或使用 DecorationImage 小部件中的 fit 属性。