如何在 flutter 中设置圆形背景颜色？

Question

我想实现这一点：

我得到了这个：

这是我的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(

          decoration:  BoxDecoration
            (color:  Color(0xffF24004),

          ),
          child: Container(
            width: 202,
            height: 196,
              margin: EdgeInsets.all(100.0),
              decoration: BoxDecoration(
                shape: BoxShape.circle, color : Color(0xffF2B749),

              )),

        ),
      ),

    );

  }
}

我试过 fit:BoxFit.cover 但它不起作用

那么，如何解决这个问题呢？ 先感谢您

Answer 1

您也可以为 Scaffold 提供背景颜色。 试试下面的代码。

Scaffold(
    backgroundColor: Color(0xffF24004),
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 202,
          height: 196,
          margin: EdgeInsets.all(100.0),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Color(0xffF2B749),
          ),
        ),
        // Add Another Icon Here
      ],
    ),
  ),

Answer 2

去掉Center widget，也可以直接设置Scaffold的背景颜色

您还可以在脚手架正下方使用 Column 并将主轴和交叉轴对齐设置为居中

但是要实现您发布的设计，您可能应该使用Stack小部件，再加上Positioned小部件

Answer 3

Scaffold(
    backgroundColor: Color(0xffF24004),
    body: Center(
      child: Container(
        width: 202,
        height: 196,
        margin: EdgeInsets.all(100.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Color(0xffF2B749),
        ),
      ),
    ),
  ),

Answer 4

您必须仅将 backgroundColor 提供给 Scaffold：-

backgroundColor: Color(0xffF24004)