如何设置我的主屏幕的背景颜色在扑动？

我正在学习扑动，我从最基本的开始。我没有用材料应用。设置整个屏幕背景颜色的好方法是什么？

以下是我目前掌握的信息:

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

我的一些问题是:

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

谢谢你的帮助！

上面的代码生成一个带有白色文本的黑色屏幕: enter image description here

318778 次浏览
小开

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

根据 https://flutter.io/layout/的说法，容器 “试图变得尽可能大”。此外，Container 可以采用 decoration，它可以是 盒子装饰，它可以有 color(它是背景颜色)。

下面这个例子的确用红色填充了屏幕，并将“ 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 有一个装饰和一个子元素，它是居中的文本。

在这里可以看到:

enter image description here

小开

我认为你需要使用 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'),
);
}
}
小开

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

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

希望这个能帮上忙。

小开

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

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,),);
}
}
小开

在颤动的基本例子，你可以设置与 backgroundColor: Colors.X的脚手架

@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.
);
}
小开

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

只要将 scaffoldBackgroundColor:设置在 ThemeData:

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

有很多方法可以做到这一点，我在这里列举了一些。

  1. 使用 backgroundColor

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

  2. Using Container in SizedBox.expand

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

  3. Using Theme

    Theme(
data: Theme.of(context).copyWith(scaffoldBackgroundColor: Colors.black),
child: Scaffold(
body: Center(...),
),
)
小开 
Scaffold(
backgroundColor: Constants.defaulBackground,
body: new Container(
child: Center(yourtext)


)
)
小开

您应该返回 脚手架小部件并将您的小部件添加到 脚手架中

比如这个代码:

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!"));
);
}
}
小开 
home: Scaffold(
backgroundColor:  Color(
0xBF453F3F),

完成:)

小开

示例代码:

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
),
),
);
}
小开

你可以在(0xFF * * ... * *)后面加上六位数字:

return Scaffold(
backgroundColor: const Color(0xFFE9ECEF),
.....) } )
小开

就像 Sirelon 建议的那样，在主题中添加脚手架的颜色,

theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFEFEFEF)),

或者像这样给单独的脚手架上色

Scaffold(
backgroundColor: Color(0xFFF1F1F1),
...
);
小开

尝试以下代码:

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget {
const MyApp({super.key});


@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white, // Change the background color of all Scaffold widgets of your app here
),
home: const Scaffold(
body: Center(child: Text("Hello, World!")),
backgroundColor: Colors.white, // Change the background color of this Scaffold widget here
),
);
}
}
小开 
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(),
);
}
}

提交答案