如何在Flutter中设置主屏幕的背景颜色？

Question

我正在学习Flutter，我从最基础的开始。我没有使用MaterialApp。设置整个屏幕的背景颜色的好方法是什么？

这是我到目前为止所知道的：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Center(child: new Text("Hello, World!"));
  }
}

我的一些问题是：

设置背景颜色的基本方法是什么？

我到底在看什么，在屏幕上吗？哪个代码是背景？有什么可以设置背景颜色的东西吗？如果没有，什么是简单和适当的“简单背景”(为了绘制背景颜色)。

谢谢你的帮助！

上面的代码生成一个带有白色文本的黑屏：

​

Answer 1

您可以一次为应用程序中的所有脚手架设置背景色。

只需设置

scaffoldBackgroundColor：

在ThemeData中

MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFEFEFEF)),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );

Answer 2

我想你也可以用脚手架做白色背景。这里有一些可能会有帮助的代码。

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {

      return new MaterialApp(
        title: 'Testing',
        home: new Scaffold(
        //Here you can set what ever background color you need.
          backgroundColor: Colors.white,
        ),
      );
    }
}

希望这能对?有所帮助。

Answer 3

这是我找到的一种方法。我不知道是否有更好的方法，或者权衡是什么。

容器

“努力做到尽可能大”，根据

https://flutter.io/layout/

..。此外，Container可以使用

，它可以是一个

BoxDecoration

，它可以有一个

(它是背景颜色)。

这里有一个示例，它确实用红色填充了屏幕，并显示了"Hello，World!“进入中心：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(color: Colors.red),
      child: new Center(
        child: new Text("Hello, World!"),
      ),
    );
  }
}

注意，容器是由MyApp build()返回的。Container有一个装饰和一个子元素，它是居中的文本。

在这里看看它的实际效果：

​

​