So ändern Sie den text Farbe der App-Leiste, Symbol-Farbe der FAB universell mit Thema?

Ich bin in der Lage, um die Hintergrundfarbe von AppBar zu Colors.amber. Dieser stellt automatisch die text-Farbe auf Schwarz. Ich bin mir bewusst, die Zugänglichkeit Probleme, die entstehen können, aber irgendwie will ich die Textfarbe auf Weiss.

Ich bin immer noch in der Lage, legen Sie die text-Farbe von der AppBar aber ich möchte es allgemein.

Hier ist das theme, das ich verwende für meine app.

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

Sie können erstellen Sie Ihre eigenen benutzerdefinierten App-Leiste durch die Ausweitung der AppBar Klasse und dann verwenden Sie es überall

InformationsquelleAutor ryanafrish7 | 2018-05-31

flutter

Ich denke, der einfachste Weg, dies zu tun ist, passen Sie den Titel Farbe für das Thema, mit dem Sie arbeiten:

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

InformationsquelleAutor Nader Dabit

Habe ich eine etwas andere Technik, ich habe nicht ein Thema, ich habe gerade angepasst sein Aussehen, so dass, wenn ich Sie erstellt habe sah so aus:

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

InformationsquelleAutor Arthur Fakhreddine

Ist hier übrigens können Sie die App-Leiste Titel-Farbe.

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),
    ),
  ),
);

InformationsquelleAutor dhuma1981

5

Werde ich schreiben, was die änderung in der Eigenschaft der ThemeData betrifft.

Den Inhalt hier geschrieben wird, ist ein Weg, der keine Auswirkungen auf andere widgets, wie viel wie möglich.

Wenn Sie möchten, ändern Sie die Farbe der App-Leiste die Titel,
```
  primaryTextTheme: TextTheme(
    title: TextStyle(
      color: Colors.white
    )
  ),
```
Wenn Sie möchten, ändern Sie die Symbol-Farbe der appbar,
```
  primaryIconTheme: const IconThemeData.fallback().copyWith(
    color: Colors.white,
  ),
```
Wenn Sie ändern möchten-Symbol Farbe des FAB.
```
  accentIconTheme: const IconThemeData.fallback().copyWith(
    color: Colors.white,
  ),
```
Darüber hinaus, wenn Sie möchten, ändern Sie die Farbe von FAB.

Es ist unmöglich, nur durch die Eigenschaft der ThemeData.
So müssen Sie es direkt. Jedoch, es wäre besser, verwenden Theme.of(context).
```
  floatingActionButton: FloatingActionButton(
    backgroundColor: Theme.of(context).primaryColor,
```
InformationsquelleAutor ko2ic

In der widget, das läuft beim ersten Aufruf main.dart-Datei, können Sie fügen Sie einen benannten parameter Design, die ermöglicht das hinzufügen von globalen Stilen

In der build-Methode des widgets,

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,)
    });
 }

Hier habe ich eine separate Methode für meine Themen genannt _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()
   );
}

Für die appBarTheme habe ich eine eigene Methode _appBarTheme

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

Ich wusste nicht AppBarTheme war ein Ding, das half ungemein. Vielen, vielen Dank!

InformationsquelleAutor Albert M

0

Einfach und effizient, und, weniger code-Methode. Verwenden Thema Licht mit der gewünschten Farbe.
```
theme: ThemeData.light().copyWith(
    accentColor: Colors.amber,
    primaryColor: Colors.amber,
  ),
```
InformationsquelleAutor Hussnain Haidar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.