Làm cách nào để đặt màu nền của màn hình chính trong Flutter?

Tôi đang học Flutter và tôi đang bắt đầu từ những điều cơ bản. Tôi không sử dụng MaterialApp. Cách tốt để đặt màu nền của toàn màn hình là gì?

Đây là những gì tôi có cho đến nay:

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

Một số câu hỏi của tôi là:

• Cách cơ bản để thiết lập màu nền là gì?
• Chính xác thì tôi đang nhìn gì trên màn hình? Mã nào "là" nền? Có điều gì để đặt màu nền trên không? Nếu không, đâu là "nền đơn giản" (để sơn màu nền) đơn giản và thích hợp.

Cảm ơn đã giúp đỡ!

Đoạn mã trên tạo ra một màn hình đen với văn bản màu trắng:

Tôi nghĩ bạn cũng có thể sử dụng một giàn giáo để làm nền trắng. Đây là một số đoạn mã có thể hữu ích.

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

Hy vọng điều này sẽ giúp 😊.

Bạn có thể đặt màu nền thành Tất cả các Giàn che trong ứng dụng cùng một lúc.

chỉ cần thiết lập giàn giáoBackgroundColor : trong ThemeData

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

Đây là một cách mà tôi tìm thấy để làm điều đó. Tôi không biết có cách nào tốt hơn không, hay sự đánh đổi là gì.

Vùng chứa "cố gắng lớn nhất có thể", theo https://flutter.io/layout/ . Ngoài ra, Container có thể lấy a decoration, có thể là BoxDecoration , có thể có color(là màu nền).

Đây là một mẫu thực sự lấp đầy màn hình với màu đỏ và đặt "Hello, World!" vào trung tâm:

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

Lưu ý, Vùng chứa được trả về bởi MyApp build (). Hộp chứa có một trang trí và một con, là văn bản ở giữa.

Nhìn thấy nó trong hành động ở đây:

Có rất nhiều cách để làm điều đó, tôi liệt kê một vài cách ở đây.

1. Sử dụng backgroundColor

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

2. Sử dụng ContainertrongSizedBox.expand

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

3. Sử dụng Theme

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

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

      )
)

Trên ví dụ cơ bản của Flutter, bạn có thể đặt bằng 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.
);
}

bạn nên trả lại tiện ích con Scaffold và thêm tiện ích con của bạn vào bên trong Scaffold

hút như mã này:

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

Tôi nghĩ bạn cần sử dụng MaterialAppwidget và sử dụng themevà thiết lập primarySwatchvới màu sắc mà bạn muốn. trông giống như mã dưới đây,

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

và đó là một cách tiếp cận khác để thay đổi màu nền:

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