Wie stelle ich die Hintergrundfarbe meines Hauptbildschirms in Flutter ein?

80

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: Geben Sie hier die Bildbeschreibung ein

Seth Ladd
quelle

Antworten:

71

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 😊.

A. DURGAPRASAD
quelle
Ich möchte blaue Farbe für den Rand und Bernstein für die Hintergrundfarbe des Containers geben. Wie kann ich das tun?
Kamlesh
62

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'),
    );
Sirelon
quelle
4
Dies ist erforderlich, um auf allen Seiten die gleiche Hintergrundfarbe zu haben (meistens Gerüste). Vielen Dank.
iCrus
40

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:

Geben Sie hier die Bildbeschreibung ein

Seth Ladd
quelle
3
Container ist eine gute Wahl, wenn Sie eine einfache App oder eine App erstellen, die kein Materialdesign verwendet. Wenn Sie eine Material-App erstellen, sollten Sie ThemeData.dark () verwenden, wenn Sie einen dunklen Hintergrund für alle Ihre Leinwände und Karten wünschen. Mit den Argumenten cardColor und canvasColor für den ThemeData-Konstruktor können Sie auch die Hintergrundfarben von Karten und Canvas genau steuern. docs.flutter.io/flutter/material/ThemeData/ThemeData.html
Collin Jackson
1
Was ist mit dem Einstellen von benutzerdefiniertem RGB?
Nirav Madariya
Ich möchte blaue Farbe für den Rand und Bernstein für die Hintergrundfarbe des Containers geben. Wie kann ich das tun?
Kamlesh
Seine Arbeit für mich
core114
26

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(...),
      ),
    )
    
CopsOnRoad
quelle
7
Scaffold(
      backgroundColor: Constants.defaulBackground,
      body: new Container(
      child: Center(yourtext)

      )
)
Hunnain Pascha
quelle
4

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

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

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

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