如何在 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)