3
votes

Comment définir la couleur de tout le texte dans un conteneur spécifique en flutter?

Je ne veux pas changer la couleur du texte de toute l'application. Juste tout le texte dans un conteneur. Puis-je l'envelopper avec un autre widget ou quelque chose pour ça?

flutter dart

2 commentaires

DefaultTextStyle ?

le widget Text a une propriété appelée TextStyle qui a une propriété appelée color

4 Réponses :

1
votes

Si vous utilisez le widget MaterialApp vous pouvez utiliser la propriété de thème de celui-ci et définir différents thèmes de Text et les appeler n'importe où dans votre application. Par exemple, le code suivant définit 3 thèmes de texte différents:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Time Tracker",
      theme: ThemeData(
        textTheme: TextTheme(
          headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold,color: Colors.blue),
          title: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic,color: Colors.red),
          body1: TextStyle(fontSize: 14.0, fontFamily: 'Hind',color: Colors.yellow),
        ),
      ),
      home: LandingPage(),
    );
  }
}

Vous pouvez ensuite appeler un thème particulier (titre) n'importe où dans votre application comme ceci:

Text('Home Page',style: Theme.of(context).textTheme.headline,)

Ce qui vous donne le titre TextTheme

1 commentaires

Mais cela s'applique à l'ensemble de l'application. l'utilisateur a explicitement demandé une solution qui ne s'applique qu'à un certain sous-arbre de ses widgets.

-2
votes

J'ai des fonctions pour tous mes styles

Text("blah", style:largeTextStyle())

alors je fais juste

TextStyle largeTextStyle() => TextStyle(fontSize: 150);

0 commentaires

15
votes

Pour appliquer certaines propriétés TextStyle uniquement à une sous-arborescence de votre application. Vous pouvez utiliser DefaultTextStyle

DefaultTextStyle(
  child: Container(child: /* your subtree */),
  style: TextStyle(color: Colors.red),
),

0 commentaires

5
votes

La réponse de flutter est bonne à mon avis. Mais la puissance de ThemeData est plus que vous ne le pensez. Voici la documentation officielle sur les thèmes pour une partie d'une application .

Vous pouvez fournir un Theme pour envelopper votre conteneur afin de fournir un nouveau thème. Voici deux façons de le faire:

1. Création de ThemeData uniques

Theme.of(context).textTheme.copyWith(
  body1: Theme.of(context).textTheme.body1.copyWith(color: Colors.red),
)

2. Extension du thème parent

Theme(
  // Find and extend the parent theme using "copyWith". See the next
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(textTheme: /* Provide your theme here! */),
  child: Container(
    child: Text("your text here"),
  ),
);

Vous pouvez également utiliser un thème existant avec un peu de changement:

/*Not recommended, this could make a totally different If you just want a little part changed.*/
Theme(
  // Create a unique theme with "ThemeData"
  data: ThemeData(
    textTheme: /* Your Text Theme*/,
  ),
  child: Container(
    onPressed: () {},
    child: Text("Your Text Here"),
  ),
);

0 commentaires