Flutter에서 메인 화면의 배경색을 어떻게 설정하나요?

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

내 질문 중 일부는 다음과 같습니다.

• 배경색을 설정하는 기본 방법은 무엇입니까?
• 화면에서 정확히 무엇을보고 있습니까? 배경이 "인"코드는 무엇입니까? 배경색을 설정하는 것이 있습니까? 그렇지 않다면, 단순하고 적절한 "단순한 배경"(배경색을 칠하기 위해)이 무엇입니까?

도와 주셔서 감사합니다!

위의 코드는 흰색 텍스트가있는 검은 색 화면을 생성합니다.

흰색 배경을 할 때도 비계를 사용할 수 있다고 생각합니다. 다음은 도움이 될 수있는 몇 가지 코드입니다.

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

이것이 도움이되기를 바랍니다 😊.

응용 프로그램에서 배경색을 All Scaffolds로 한 번에 설정할 수 있습니다.

scaffoldBackgroundColor : ThemeData에서 설정하기 만하면됩니다.

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

내가 찾은 한 가지 방법이 있습니다. 더 나은 방법이 있는지, 장단점이 무엇인지 모르겠습니다.

https://flutter.io/layout/ 에 따르면 컨테이너는 "가능한 한 크게 만들려고"합니다 . 또한 Container는 (배경색)을 가질 decoration수있는 BoxDecoration 일 수 있는를 취할 수 있습니다 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 ()에 의해 반환됩니다. 컨테이너에는 장식과 중앙 텍스트 인 자식이 있습니다.

여기에서 실제로 확인하십시오.

이를 수행하는 방법은 여러 가지가 있지만 여기에 몇 가지를 나열합니다.

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(...),
     ),
   )
   

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

      )
)

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

당신은 반환해야 발판이 위젯과 내부에 위젯을 추가 비계

이 코드로 빨아 :

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

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(MyApp());

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