Как изменить цвет текста в AppBar, цвет значка FAB универсально с помощью темы?

Я могу установить цвет фона AppBar в Colors.amber. Это автоматически устанавливает цвет текста в черный. Я знаю о проблемах доступности, которые могут возникнуть, но в любом случае я хочу, чтобы цвет текста был белым.

Я все еще могу установить цвет текста из AppBar но я хотел бы установить его универсально.

Здесь тема, которую я использую для своего приложения.

  title: 'Flutter Demo',
  theme: new ThemeData(
    primarySwatch: Colors.amber,
    textTheme: Theme.of(context).textTheme.apply(
          bodyColor: Colors.white,
          displayColor: Colors.white,
        ),
  ),

Ответы

Ответ 1

Я думаю, что самый простой способ сделать это - настроить цвет заголовка для темы, с которой вы работаете:

theme: new ThemeData(
  primarySwatch: Colors.grey,
  primaryTextTheme: TextTheme(
    title: TextStyle(
      color: Colors.white
    )
  )
)

Ответ 2

Я использовал немного другую технику, я не использовал тему, я просто настроил ее внешний вид, чтобы при создании она выглядела так:

appBar: new AppBar(
          iconTheme: IconThemeData(color: Colors.white),
          title: const Text('Saved Suggestions', style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.pink,
        ),

Ответ 3

Вот как вы можете установить цвет заголовка AppBar.

return new MaterialApp(
  theme: Theme.of(context).copyWith(
      accentIconTheme: Theme.of(context).accentIconTheme.copyWith(
        color: Colors.white
      ),
      accentColor: Colors.amber,
      primaryColor: Colors.amber,
      primaryIconTheme: Theme.of(context).primaryIconTheme.copyWith(
        color: Colors.white
      ),
      primaryTextTheme: Theme
          .of(context)
          .primaryTextTheme
          .apply(bodyColor: Colors.white)),
  home: Scaffold(
    appBar: AppBar(
      title: Text("Theme Demo"),
      leading: IconButton(
        onPressed: (){},
        icon: Icon(Icons.menu),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.add),
    ),
  ),
);

Ответ 4

Я напишу, на что влияет изменение свойства ThemeData.

Содержимое, написанное здесь, является способом, который не влияет на другие виджеты в максимально возможной степени.

Если вы хотите изменить цвет заголовка панели приложения,

  primaryTextTheme: TextTheme(
    title: TextStyle(
      color: Colors.white
    )
  ),

Если вы хотите изменить цвет значка панели приложения,

  primaryIconTheme: const IconThemeData.fallback().copyWith(
    color: Colors.white,
  ),

Если вы хотите изменить цвет значка FAB.

  accentIconTheme: const IconThemeData.fallback().copyWith(
    color: Colors.white,
  ),

Кроме того, когда вы хотите изменить цвет FAB.
Это невозможно только благодаря свойству ThemeData. Так что вам нужно указать это напрямую. Однако было бы лучше использовать Theme.of(context).

  floatingActionButton: FloatingActionButton(
    backgroundColor: Theme.of(context).primaryColor,

Ответ 5

В виджет, который запускается при первом вызове файла main.dart, вы можете добавить тему с именованным параметром, которая позволяет добавлять глобальные стили

В методе сборки виджета

Widget build(BuildContext context) {

return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: _buildLightTheme(),
    title: 'title of app',
    home: LoginPage(app: app),
    initialRoute: '/login',
    routes: <String, WidgetBuilder>{
      "/login": (BuildContext context) => LoginPage(app: app,)
    });
 }

Здесь я создал отдельный метод для моих тем, который называется _buildLightTheme.

ThemeData _buildLightTheme() {
   final ThemeData base = ThemeData.light();
    return base.copyWith(
     accentColor: kUndaGreen,
     scaffoldBackgroundColor: kUndaWhite,
     cardColor: Colors.white,
     textSelectionColor: Colors.amberAccent,
     errorColor: Colors.green,
     textSelectionHandleColor: Colors.black,
    appBarTheme:_appBarTheme()
   );
}

Для appBarTheme у меня есть отдельный метод _appBarTheme

AppBarTheme _appBarTheme(){
  return AppBarTheme( 
     elevation: 0.0,
     color: kUndaGreen,
     iconTheme: IconThemeData(
       color: Colors.white,
     ),);
 }

Ответ 6

Простой и эффективный, менее затратный метод кода. Используйте светлую тему нужного цвета.

theme: ThemeData.light().copyWith(
    accentColor: Colors.amber,
    primaryColor: Colors.amber,
  ),