Background color или цвет фона во Flutter

Очень частый вопрос у новичков, как изменить фон у приложения Flutter. Самый простой путь, это указать в свойствах background виджета Scaffold необходимый фон.

//Обязательная строка для всех приложений
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

// Основной экран
class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {

      return new MaterialApp(
        title: 'Меняем цвет фона в приложении',
        home: new Scaffold(
        //Сейчас мы установим цвет фона - красный
          backgroundColor: Colors.red,
        ),
      );
    }
}

Еще один вариант, который удобно использовать. Если вы вдруг решите изменить цвет фона на всех экранах. Это использование ThemeData в свойствах виджета MaterialApp

 MaterialApp(
      title: 'Установка цвета фона в начале кода',
      theme: ThemeData(scaffoldBackgroundColor: const Colors.green),
      home: MyFirstPage(title: 'Установлен цвет фона - зеленый'),
    );

Background color контейнера

Есть и более специфические способы, но они тоже иногда имеют место быть: данным кодом мы устанавливаем background контейнера на желтый

Container(
      decoration: BoxDecoration(color: Colors.yellow),
      child: Center(
        child: Text("Цвет фона желтый"),
      ),
    );

а затем вкладываем полностью Container в виджет:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // Главный виджет приложения
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: new BoxDecoration(color: Colors.yellow),
      child: Center(
        child: Text("Цвет фона желтый"),
      ),
    );
  }
}

Кстати про виджет Text вы можете также почитать у нас на сайте.

Background и возможности класса Color во Flutter

Помимо установки определенного цвета таких как red, yellow, black, вы можете установить и бледность цвета. Большинство цветов имеет «бледность» от 100 до 900 с шагом 100 плюс

Итак повторим, что установить цвет фона во Flutter можно с помощью установки в свойствах background виджетов Scaffold, MaterialApp или Container.

Также вы можете вынести значение background во Flutter в переменную, и например спрашивать у пользователя какой ему цвет хочется видеть в качестве фона, сохраняя это значение на устройстве или через свое возданное API. И при отрисовки виджета свойству background присваивать значение этой переменной.