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

我的一些问题是：

设置背景颜色的基本方法是什么？
我到底在屏幕上看到了什么？哪个代码＆＃34;是＆＃34;的背景？是否有设置背景颜色的东西？如果没有，那么简单而恰当的简单背景＆＃34; （为了绘制背景颜色）。

感谢您的帮助！

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

Answer 1

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

根据{{3}}，

Container＆＃34;尽量做到尽可能大＃34;此外，Container可以使用decoration，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!"), ), ); } }，可以有string uncompressed = "dacacacd";（背景颜色）。

这是一个确实用红色填充屏幕的样本，然后放入＆＃34; Hello，World！＆＃34;进入中心：

string compressed = "d3(ac)d";

注意，MyApp build（）返回Container。 Container有一个装饰和一个孩子，它是居中的文本。

请在此处查看：

https://flutter.io/layout/

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

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

      )
)

Answer 4

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

  @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 5

您应该返回 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!"));
    );
  }
}

Answer 6

home: Scaffold(
            backgroundColor:  Color(
                0xBF453F3F),

完成:)

Answer 7

我认为您需要使用MaterialApp窗口小部件并使用theme并使用您想要的颜色设置primarySwatch。看起来像下面的代码，

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 MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Answer 8

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

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 9

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

只需在ThemeData中设置 scaffoldBackgroundColor：

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

Answer 10

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sample App'),
          backgroundColor: Colors.amber,  // changing Appbar back color
        ),
        backgroundColor: Colors.blue,     // changing body back color
      ),
    ),
  );
}

Answer 11

有很多方法可以做到，这里我列举的很少。

使用backgroundColor

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

在Container中使用SizedBox.expand

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

使用Theme

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

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

11 个答案: