¿Cómo configuro el color de fondo de mi pantalla principal en Flutter?

Estoy aprendiendo Flutter y estoy comenzando desde lo básico. No estoy usando MaterialApp. ¿Cuál es una buena forma de establecer el color de fondo de toda la pantalla?

Esto es lo que tengo hasta ahora:

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

Algunas de mis preguntas son:

• ¿Cuál es una forma básica de establecer el color de fondo?
• ¿Qué estoy mirando exactamente en la pantalla? ¿Qué código "es" el fondo? ¿Hay algo para establecer el color de fondo? Si no es así, ¿qué es un "fondo simple" simple y apropiado (para pintar un color de fondo)?

¡Gracias por la ayuda!

El código anterior genera una pantalla negra con texto blanco:

Creo que también puedes usar un andamio para hacer el fondo blanco. Aquí hay un fragmento de código que puede ayudar.

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

Espero que esto ayude 😊.

Puede establecer el color de fondo para Todos los andamios en la aplicación a la vez.

simplemente configure scaffoldBackgroundColor: en ThemeData

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

Aquí hay una forma en que encontré para hacerlo. No sé si hay mejores formas o cuáles son las compensaciones.

El contenedor "intenta ser lo más grande posible", según https://flutter.io/layout/ . Además, Container puede tomar un decoration, que puede ser un BoxDecoration , que puede tener uncolor (que es el color de fondo).

Aquí hay una muestra que de hecho llena la pantalla de rojo y pone "¡Hola, mundo!" en el centro:

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

Tenga en cuenta que MyApp build () devuelve el contenedor. El Contenedor tiene una decoración y un niño, que es el texto centrado.

Véalo en acción aquí:

Hay muchas formas de hacerlo, aquí enumero algunas.

1. Utilizando backgroundColor

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

2. Usando ContainerenSizedBox.expand

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

3. Utilizando Theme

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

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

      )
)

En el ejemplo básico de Flutter se puede configurar con backgroundColor: Colors.Xde 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.
);
}

debe devolver el widget de Scaffold y agregar su widget dentro de Scaffold

chupar como este código:

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

Creo que necesitas usar un MaterialAppwidget y usar themey configurar primarySwatchcon el color que quieras. parece el siguiente código,

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

y es otro enfoque para cambiar el color del fondo:

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