Как установить цвет фона Flutter OutlineButton?

Question

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("..."),
      ),
      body: Container(
        color: Colors.green,
        child: OutlineButton(
          onPressed: () { },
          color: Colors.orange,
          highlightColor: Colors.pink,
          child: Container(
            color: Colors.yellow,
            child: Text("A"),
          ),
          shape: CircleBorder(),
        ),
      ),
    );
  }
}

Приведенный выше код дает прозрачную кнопку.Как я могу получить оранжевую кнопку OutlineButton?

Answer 1

Чтобы изменить backgroundColor OutlineButton , вы можете использовать DecoratedBox и Theme виджет. В конце этого ответа вы найдете быстрый пример.

В любом случае, я бы по-прежнему рекомендовал , просто используя вместо него FlatButton с атрибутом color.

Оберните OutlinedButton внутри DecoratedBox. Установите shape вашего DecoratedBox в ту же форму, что и OutlinedButton. Теперь вы можете использовать атрибут color вашего DecoratedBox, чтобы изменить цвет. В результате все еще будет небольшой отступ вокруг OutlinedButton. Чтобы удалить это, вы можете обернуть DecoratedBox внутри Theme, в котором вы настраиваете ButtonTheme. Внутри ButtonTheme вы хотите установить materialTapTargetSize: MaterialTapTargetSize.shrinkWrap.

Обивка добавлена ​​в Flutter, чтобы увеличить область касания вокруг кнопки до минимального размера 48x48 (источник) . Установка materialTapTargetSize в MaterialTapTargetSize.shrinkWrap удаляет этот минимальный размер.

---

FlatButton пример:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: FlatButton(
            color: Colors.pinkAccent,
            shape: CircleBorder(),
            onPressed: () => {},
            child: Text('A'),
          ),
        ),
      ),
    );
  }
}

---

OutlinedButton пример:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration:
          ShapeDecoration(shape: CircleBorder(), color: Colors.pinkAccent),
      child: Theme(
        data: Theme.of(context).copyWith(
            buttonTheme: ButtonTheme.of(context).copyWith(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap)),
        child: OutlineButton(
          shape: CircleBorder(),
          child: Text('A'),
          onPressed: () => {},
        ),
      ),
    );
  }
}

Answer 2

Вы можете использовать FlatButton и просто установить там цвет.

Answer 3

Вот способ, которым вы можете проверить цвет фона кнопки. Удалите hightlightColor и попробуйте дать какое-то значение свойству highlightElevation OutlineButton, а затем нажмите его, чтобы увидеть, что изначально оно загружается оранжевым цветом.