web-dev-qa-db-fra.com

Comment définir la couleur d'arrière-plan de mon écran principal dans Flutter?

J'apprends Flutter et je pars de l'essentiel. Je n'utilise pas MaterialApp. Quel est le bon moyen de définir la couleur d'arrière-plan de tout l'écran?

Voici ce que j'ai jusqu'à présent:

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

Certaines de mes questions sont:

  • Quelle est la méthode de base pour définir la couleur de fond?
  • Qu'est-ce que je regarde exactement à l'écran? Quel code "est" le fond? Y a-t-il quelque chose pour définir la couleur de fond? Sinon, qu'est-ce qu'un "fond simple" simple et approprié (pour peindre une couleur de fond).

Merci pour l'aide!

Le code ci-dessus génère un écran noir avec du texte blanc:  enter image description here

dartflutter
12
Seth Ladd

Voici une façon que j'ai trouvé de le faire. Je ne sais pas s'il existe de meilleurs moyens ou quels sont les compromis.

Container "tente d'être aussi grand que possible", selon https://flutter.io/layout/ . De plus, Container peut prendre une decoration, qui peut être un BoxDecoration , qui peut avoir une color (qui est la couleur de fond).

Voici un exemple qui remplit bien l'écran de rouge et affiche "Hello, World!" dans le centre:

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

Remarque, le conteneur est renvoyé par la construction MyApp (). Le conteneur a une décoration et un enfant, qui est le texte centré.

Voir en action ici:

 enter image description here

18
Seth Ladd

Je pense que vous pouvez également utiliser un échafaudage pour faire le fond blanc. Voici un morceau de code qui peut aider.

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

J'espère que cela t'aides ????.

11
A.DURGAPRASAD

et c'est une autre approche pour changer la couleur de fond:

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