Wie stelle ich die Hintergrundfarbe meines Hauptbildschirms in Flutter ein?

Ich lerne Flutter und beginne mit den Grundlagen. Ich verwende keine MaterialApp. Was ist ein guter Weg, um die Hintergrundfarbe des gesamten Bildschirms einzustellen?

Folgendes habe ich bisher:

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

Einige meiner Fragen sind:

• Was ist ein grundlegender Weg, um die Hintergrundfarbe einzustellen?
• Was genau sehe ich auf dem Bildschirm? Welcher Code "ist" der Hintergrund? Gibt es eine Möglichkeit, die Hintergrundfarbe einzustellen? Wenn nicht, was ist ein einfacher und angemessener "einfacher Hintergrund" (um eine Hintergrundfarbe zu malen).

Danke für die Hilfe!

Der obige Code erzeugt einen schwarzen Bildschirm mit weißem Text:

Ich denke, Sie können auch ein Gerüst verwenden, um den weißen Hintergrund zu machen. Hier ist ein Teil des Codes, der helfen kann.

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

Hoffe das hilft 😊.

Sie können die Hintergrundfarbe auf Alle Gerüste in der Anwendung gleichzeitig einstellen.

Setzen Sie einfach scaffoldBackgroundColor: in ThemeData

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

Hier ist eine Möglichkeit, die ich gefunden habe. Ich weiß nicht, ob es bessere Möglichkeiten gibt oder welche Kompromisse es gibt.

Container "versucht so groß wie möglich zu sein", so https://flutter.io/layout/ . Container kann auch ein nehmen decoration, was eine BoxDecoration sein kann, die ein haben kann color(was die Hintergrundfarbe ist).

Hier ist ein Beispiel, das den Bildschirm tatsächlich mit Rot füllt und "Hallo Welt!" in die Mitte:

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

Beachten Sie, dass der Container vom MyApp build () zurückgegeben wird. Der Container hat eine Dekoration und ein Kind, das der zentrierte Text ist.

Sehen Sie es hier in Aktion:

Es gibt viele Möglichkeiten, ich liste hier einige auf.

1. Verwenden von backgroundColor

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

2. Verwenden ContainerinSizedBox.expand

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

3. Verwenden von Theme

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

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

      )
)

Am Grundbeispiel von Flutter können Sie mit backgroundColor: Colors.XScaffold einstellen

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

Ich denke, Sie müssen MaterialAppWidget verwenden themeund primarySwatchmit der gewünschten Farbe verwenden und einstellen . sehen aus wie unter Code,

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

und es ist ein weiterer Ansatz, um die Farbe des Hintergrunds zu ändern:

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

Sie sollten das Scaffold- Widget zurückgeben und Ihr Widget in Scaffold hinzufügen

saugen wie dieser Code:

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