Рубрики
Flutter

ThemeData во Flutter

Класс ThemeData во Flutter определяет конфигурацию общей отображаемой темы для MaterialApp или для дерева виджетов в приложении. Данное свойство MaterialApp можно использовать для настройки внешнего вида всего приложения. Если вы хотите в одном из виджетов (экранов приложения) изменить цвет или иное, то вам достаточно переопределить в верхней части поддерева Theme.

Т.е. иными словами, если у вас всегда будет применяться зеленый цвет во всех AppBar экранов в приложении, то вы можете всего лишь один раз задать в primaryColor: Colors.green и всегда у вас по умолчанию будет отображаться зеленый цвет. Это очень удобно, когда вы вдруг решили изменить цвет всех AppBar-ов, и вам не надо менять в каждом экране, достаточно просто его изменить в ThemeData после MaterialApp

Пример использования:

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.green,
    accentColor: Colors.white,
    textTheme: TextTheme(bodyText2: TextStyle(color: Colors.black)),
  ),
  home: Scaffold(
    appBar: AppBar(
      title: const Text('ThemeData демонстрация'),
    ),
    floatingActionButton: FloatingActionButton(
      child: const Icon(Icons.add),
      onPressed: () {},
    ),
    body: Center(
      child: Text(
        'Кнопка была нажата 0 раз',
      ),
    ),
  ),
)
Рубрики
Flutter

Background Сolor или цвет фона во 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 контейнера на желтый

Рубрики
Flutter

Использование Flutter Color для заливки фона

Есть два способа использования Flutter Color, чтобы залить фон виджета во Флаттере. Я пока не знаю, есть ли способы лучше этих, можете дополнить статью в комментариях.

Container, как сказано в документации Flutter, старается заполнить все свободное пространство. А также, контейнер может принять свйоство decoration, которое может быть BoxDecoration, которое может иметь color — здесь он представляет как раз цвет фона.

Способ первый: используйте встроенный класс Color.class: