Заметки
ButtonTheme class - настройка стиля кнопок

Егор Долгов

08.09.2019 13:45:29

За все время: 316 просмотров, 30 посетителей.
За последние 30 дней: 0 просмотров, 0 посетителей.

ButtonTheme class - настройка стиля кнопок

Источник https://api.flutter.dev/flutter/material/ButtonTheme-class.html

Используйте ButtonTheme для настройки цвета и геометрии кнопок.
ButtonTheme может быть определен в ThemeData.buttonTheme. Или можно использовать его как виджет для переопределения стиля для дочерних виджетов.

С помощью ButtonTheme можно изменить размер кнопок по умолчанию.

Фактический внешний вид кнопок зависит от темы кнопки, включенного состояния кнопки, ее высоты (если таковая имеется) и общей темы.

Наследование: Object > Diagnosticable > DiagnosticableTree > Widget > ProxyWidget > InheritedWidget > ButtonTheme

Конструкторы класса:

ButtonTheme() - создает тему кнопки;
ButtonTheme.bar() - создает тему кнопки, которая подходит для панелей кнопок, используемых в нижних колонтитулах диалоговых окон и в заголовках таблиц данных;
ButtonTheme.fromButtonThemeData() - создает тему кнопки из существующей темы.

ButtonTheme() конструктор

Параметры

textTheme → ButtonTextTheme
по умолчанию: ButtonTextTheme.normal

layoutBehavior → ButtonBarLayoutBehavior
по умолчанию: ButtonBarLayoutBehavior.padded

minWidth → double
Минимальная ширина.
по умолчанию: 88.0

height → double
Высота кнопки.
по умолчанию: 36.0

padding → EdgeInsetsGeometry
Задать отступы внутри контейнера кнопки.

shape → ShapeBorder

alignedDropdown → bool
по умолчанию: false

buttonColor → Color
disabledColor → Color
focusColor → Color
hoverColor → Color
highlightColor → Color
splashColor → Color
colorScheme → ColorScheme
materialTapTargetSize → MaterialTapTargetSize

child → Widget
Дочерний элемент.

Пример использования ButtonTheme() для создания единого стиля кнопок в цифровой клавиатуре

Свойства ButtonTheme которые используются в данном примере

ButtonTheme(
  buttonColor: Colors.white,// Белый цвет кнопок
  minWidth: 80,// Минимальная ширина
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),// Скругление для кнопок
  padding: EdgeInsets.all(10),// Отступы от дочернего виджета до края кнопки
  child: ... // Дочерний элемент
)

Пример кода полностью:

import 'package:flutter_web/material.dart';

void main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MainScreen()));

class MainScreen extends StatefulWidget {
  @override
  State createState() => MainScreenState();
} //MainScreen

class MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    List<String> list = ['1','2','3','divider','4','5','6','divider','7','8','9','divider','*','0','#'];

    return Scaffold(
      body: Center(
        child: Theme(
          data: Theme.of(context)
              .copyWith(textTheme: TextTheme(button: TextStyle(fontSize: 50))),
          child: ButtonTheme(
            buttonColor: Colors.white,
            minWidth: 80,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
            padding: EdgeInsets.all(10),
            child: Wrap(
              alignment: WrapAlignment.center,
              spacing: 15,
              children: list
                  .map((item) => item == 'divider'
                      ? Divider()
                      : RaisedButton(
                          onPressed: () {},
                          child: Text(item),
                        ))
                  .toList(),
            ),
          ),
        ),
      ),
    );
  } //build
} //MainScreenState

Подборка заметок