如何在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

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

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 2

这是我发现的一种方式.我不知道是否有更好的方法,或者权衡取舍.

根据https://flutter.io/layout/,容器 "试图尽可能大" .此外,Container可以采用a decoration,可以是BoxDecoration,它可以具有color(其为背景颜色).

这是一个确实用红色填充屏幕的样本,并放入"你好,世界!" 进入中心:

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!"),
      ),
    );
  }
}

注意,Container由MyApp build()返回.Container有一个装饰和一个孩子,它是居中的文本.

在这里看到它:

Answer 3

这是改变背景颜色的另一种方法：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(home: Scaffold(backgroundColor: Colors.pink,),);
    }
}

Answer 4

您可以立即在应用程序中将背景色设置为“所有支架”。

只需在ThemeData中设置scaffoldBackgroundColor：

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

Answer 5

Scaffold(
      backgroundColor: Constants.defaulBackground,
      body: new Container(
      child: Center(yourtext)

      )
)

Answer 6

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.black, 
      ),
      home HomeScreen(),
    );
  }
}

Answer 7

在 Flutter 的基本示例中，您可以使用backgroundColor: Colors.XScaffold进行设置

@override
Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
        backgroundColor: Colors.blue,
        body: Center(
            // Center is a layout widget. It takes a single child and positions it
            // in the middle of the parent.
            child: Column(
                // Column is also layout widget. It takes a list of children and
                // arranges them vertically. By default, it sizes itself to fit its
                // children horizontally, and tries to be as tall as its parent.
                //
                // Invoke "debug painting" (press "p" in the console, choose the
                // "Toggle Debug Paint" action from the Flutter Inspector in Android
                // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
                // to see the wireframe for each widget.
                //
                // Column has various properties to control how it sizes itself and
                // how it positions its children. Here we use mainAxisAlignment to
                // center the children vertically; the main axis here is the vertical
                // axis because Columns are vertical (the cross axis would be
                // horizontal).
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Text(
                        'You have pushed the button this many times:',
                    ),
                    Text(
                        '$_counter',
                        style: Theme.of(context).textTheme.display1,
                    ),
                ],
            ),
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add_circle),
        ), // This trailing comma makes auto-formatting nicer for build methods.
    );
}

Answer 8

这样做的方法有很多，这里我列出的很少。

1. 使用 backgroundColor

   Scaffold(
     backgroundColor: Colors.black,
     body: Center(...),
   )
   

2. Container在中使用SizedBox.expand

   Scaffold(
     body: SizedBox.expand(
       child: Container(
         color: Colors.black,
         child: Center(...)
       ),
     ),
   )
   

3. 使用 Theme

   Theme(
     data: Theme.of(context).copyWith(scaffoldBackgroundColor: Colors.black),
     child: Scaffold(
       body: Center(...),
     ),
   )
   

Answer 9

您应该返回 Scaffold小部件并将您的小部件添加到Scaffold 中

像这段代码一样糟糕：

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 Scaffold(
          backgroundColor: Colors.white,
          body: Center(child: new Text("Hello, World!"));
    );
  }
}