RichTextin käyttö Flutter: opas ja esimerkit

Flutter, on RichText widget, jonka avulla voit luoda tekstiä eri tyyleillä ja muotoiluilla yhdessä tekstiwidgetissä. Voit käyttää useita TextSpan widgetejä määrittääksesi tekstin eri osia eri tyyleillä.

Tässä on esimerkki käytöstä RichText:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('RichText Example'),  
     ),  
      body: Center(  
        child: RichText(  
          text: TextSpan(  
            text: 'Hello ',  
            style: DefaultTextStyle.of(context).style,  
            children: <TextSpan>[  
              TextSpan(  
                text: 'Flutter',  
                style: TextStyle(  
                  fontWeight: FontWeight.bold,  
                  color: Colors.blue,  
               ),  
             ),  
              TextSpan(text: ' is amazing!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

Tässä esimerkissä widgetiä RichText käytetään tekstin luomiseen eri tyyleillä. Widgetejä TextSpan käytetään lapsena tekstin eri osien määrittelemiseen eri tyyleillä.

• Ensimmäinen TextSpan on tyylitelty käyttämällä kontekstin oletustyyliä(tässä tapauksessa se perii:n oletustyylin AppBar).
• Toinen TextSpan käyttää lihavointia ja sinistä väriä sanaan " Flutter."
• Kolmas TextSpan yksinkertaisesti lisää tekstin "on mahtavaa!" loppuun.

Voit mukauttaa muotoilua, fontteja, värejä ja muita tyylejä kunkin sisällä TextSpan tarpeen mukaan.

Widget RichText on erityisen hyödyllinen, kun sinun on käytettävä erilaisia ​​tyylejä tekstin eri osiin, esimerkiksi kun näytät muotoiltua sisältöä tai korostat tiettyjä sanoja tai lauseita.

Voit vapaasti kokeilla erilaisia ​​tyylejä ja sisäkkäisiä TextSpan widgetejä saadaksesi haluamasi visuaaliset tehosteet sovelluksessasi.