我想更改 flutter 应用程序的背景颜色？

Question

I just want to change the background color of this Flutter application.

Please let me know how to add a picture as background. And how to change the opacity of that image?

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

You can set the background color in your Scaffold

For example

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

Answer 2

Change background color

Depends on the root, you can use for example:

• backgroundColor when Scaffold is parent

• color when Container is parent

So

Scaffold(
  backgroundColor: Colors.blueAccent,
);

or

Container(
  color: Colors.blueAccent,
);

depends where you need background color.

Set image as background

To add "something" as background you have to wrap it in to Stack (which has list of childrens like Column or Row )

This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

Change from:

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

to:

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

Set opacity of the widget

When you need to change opacity for example this view:

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

you have to wrap it with Opacity widget:

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

And set opacity which is range from 0.0 to 1.0, where:

An opacity of 1.0 is fully opaque (100% visibility)

An opacity of 0.5 is half opaque (50% visibility)

An opacity of 0.0 is fully transparent (0% visibility = NOT visible)

Full example

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