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

Question

Я могу установить цвет фона 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,
        ),
  ),

Answer 1

В виджет, который запускается при первом вызове файла 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,
     ),);
 }

Answer 2

Я напишу, на что влияет изменение свойства 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,

Answer 3

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

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

Answer 4

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

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

Answer 5

Здесь вы можете установить цвет заголовка 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),
    ),
  ),
);