如何在 Flutter 中将 PNG 图像分层到背景颜色上？

Question

我想在 Flutter 中在纯色背景色之上显示 PNG 图像。我想要的结果是这样的：

目前，我的代码呈现如下：

：

这是我正在使用的相关代码：

class LogIn extends StatefulWidget {


  @override
  State<LogIn> createState() => _LogInState();
}

class _LogInState extends State<LogIn> {
  bool isAPIcallProcess = false;
  bool hidePassword = true;
  GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();
  String? username;
  String? password;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("lib/img/pomodoro.png"),
              fit: BoxFit.cover

            )
        ),
        child: Scaffold(
          backgroundColor: Color(0xffF24004),
          body: ProgressHUD(
            child: Form(
              key: globalFormKey,
              child: _LogInUI(context),
            ),
            inAsyncCall: isAPIcallProcess,
            opacity: 0.3,
            key: UniqueKey(),
          ),
          appBar: AppBar(
            backgroundColor: Color(0xff0067FE),
            title: Center(
              child: Text("P O M O D O N E", style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 30,
                color: Color(0xffF3F5F4),
              ),),
            ),
          ),
        ),
      ),
    );
  }


  Widget _LogInUI(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: MediaQuery
                .of(context)
                .size
                .width,
            height: MediaQuery
                .of(context)
                .size
                .width,
            decoration: const BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.transparent,
                      Colors.transparent
                    ])
            ),
          )
        ],
      ),
    );
  }
}

我已将图像添加到

pubspec.yaml

文件中，但它无法正确显示。有人可以解释一下如何在 Flutter 中实现正确的图像分层吗？

pubspec.yaml

  # To add assets to your application, add an assets section, like this:
  assets:
    - lib/img/pomodoro.png

  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Answer 1

下面是实现底层的代码

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: (){},
    child: Icon(Icons.check, color: Colors.white,),
    backgroundColor: Colors.blue,
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  body: Container(
    decoration: const BoxDecoration(
      //if you want color as background
      color: Color(0xffF24004)
      //if you want to show image as background
      // image: DecorationImage(
      //     fit: BoxFit.fill,
      //   image: const NetworkImage("your background url")//add your url here for background
      // )
      ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Spacer(),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("PROMODONO", style: TextStyle(color: Colors.white,fontWeight: FontWeight.w800),),
          ],
        ),
        SizedBox(height: 20,),
        SizedBox(
            width: 200,
            height: 200,
            child: FittedBox(
                fit: BoxFit.fill,
                child: Image.network("your url")//add your image url if its from network if not change it to image.asset
            )
        ),

        const Spacer(flex: 3,),
      ],
    ),
  ),
);

Answer 2

您的构建应该如下所示。带一些填充物。不要使用 appBar，因为它太高了。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Color(0xffF24004),
        body: Column(
          children: [
            SizedBox(height: 20,),
            Text(
              "P O M O D O N E",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 30,
                color: Color(0xffF3F5F4),
              ),
            ),
            Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("lib/img/pomodoro.png"),
                      fit: BoxFit.cover)),
            ),
            Spacer(),
            FloatingActionButton(onPressed: () {}),

          ],
        ),
      ),
    );
  }