我想更改颤振应用的背景颜色？

Posted 2023-02-23

【中文标题】我想更改颤振应用的背景颜色？

【英文标题】：I want to change the background color of a flutter app?

【发布时间】：2020-08-02 00:17:26

【问题描述】：

我只是想改变这个 Flutter 应用程序的背景颜色。

请告诉我如何添加图片作为背景。 以及如何更改该图像的不透明度？

import 'package:flutter/material.dart';

void main() => runApp(Loginscreen());

class Loginscreen extends StatelessWidget 
  static const routeName = '/login';

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          //title: Text('LOG IN'),
          elevation: 0,
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () ,
          ),
        ),
        body: Container(
            padding: const EdgeInsets.all(15),
            color: Theme.of(context).primaryColor,
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                TextField(
                  style: TextStyle(fontSize: 18, color: Colors.black54),
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.white,
                    hintText: 'User Name',
                    contentPadding: const EdgeInsets.all(15),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                TextField(
                  obscureText: true,
                  style: TextStyle(fontSize: 18, color: Colors.black54),
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.white,
                    hintText: 'Password',
                    contentPadding: const EdgeInsets.all(15),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                FlatButton(
                  onPressed: null,
                  child: Text(
                    'Log In',
                    style: TextStyle(
                      fontSize: 20,
                    ),
                  ),
                  shape: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: 2),
                    borderRadius: BorderRadius.circular(5),
                  ),
                  padding: const EdgeInsets.all(15),
                  textColor: Colors.white,
                ),
              ],
            )),
      ),
    );
  

【问题讨论】：

我的解决方案对你有用吗？

【参考方案1】：

改变背景颜色

取决于根目录，你可以使用例如：

backgroundColor 当Scaffold 是父级时

color 当Container 是父级时

所以

Scaffold(
  backgroundColor: Colors.blueAccent,
);

或

Container(
  color: Colors.blueAccent,
);

取决于您需要背景颜色的位置。

设置图片为背景

要将“某物”添加为背景，您必须将其包装到Stack（其中包含Column 或Row 等儿童列表）

如果您想以简单的方式重叠多个子项，例如有一些文本和图像，用渐变覆盖，并且底部附加一个按钮，则该类很有用。

更改自：

Container(
    child: Text("Example text"),
),

到：

Stack(
  children: <Widget>[
    Image.asset("assets/background_image.jpg"),
    Container(
      child: Text("Example text"),
    ),
  ],
),

设置小部件的不透明度

当您需要更改不透明度时，例如此视图：

Image.asset("assets/background_image.jpg")

你必须用Opacity 小部件包装它：

Opacity(
  opacity: 0.5,
  child: Image.asset("assets/background_image.jpg"),
),

并设置opacity，取值范围为0.0到1.0，其中：

不透明度 1.0 表示完全不透明（100% 可见性）

0.5 的不透明度表示半不透明（50% 可见性）

0.0 的不透明度是完全透明的（0% 可见性 = 不可见）

完整示例

Stack(
  children: <Widget>[
    Opacity(
      opacity: 0.5,
      child: Image.asset("assets/background_image.jpg"),
    ),
    Container(
      child: Text("Example text"),
    ),
  ],
),

【参考方案2】：

您可以在Scaffold中设置背景颜色

例如

Scaffold(
   backgroundColor: Colors.pink,
   appBar: AppBar(),
)

【讨论】：

谢谢哥们.. 也请善待其他部分。 :-)