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

Question

我只是想改变这个 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,
                ),
              ],
            )),
      ),
    );
  }
}

Answer 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"),
    ),
  ],
),

Answer 2

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

例如

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