close

リッチテキストの使用 Flutter: ガイドと例

の は Flutter、 RichText 1 つのテキスト ウィジェット内でさまざまなスタイルと書式設定のテキストを作成できるウィジェットです。 TextSpan 複数のウィジェットを使用して、テキストのさまざまな部分をさまざまなスタイルで定義 できます。

使用方法の例を次に示します 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!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}

この例では、 RichText ウィジェットを使用してさまざまなスタイルのテキストを作成します。 ウィジェット TextSpan は、テキストのさまざまな部分を個別のスタイルで定義するための子として使用されます。

  • 1 つ目は、 TextSpan コンテキストのデフォルトのテキスト スタイルを使用してスタイル設定されます(この場合、 のデフォルト スタイルを継承します AppBar)。
  • 2 番目の例では、 TextSpan 単語「. Flutter 」に太字のフォントの太さと青色を適用します。
  • 3 番目は TextSpan 単に「素晴らしいです!」というテキストを追加します。 最後まで。

必要に応じて、それぞれの書式設定、フォント、色、その他のスタイルをカスタマイズできます TextSpan。

この RichText ウィジェットは、書式設定されたコンテンツを表示したり、特定の単語やフレーズを強調したりする場合など、テキストのさまざまな部分にさまざまなスタイルを適用する必要がある場合に特に便利です。

さまざまなスタイルやネストされたウィジェットを自由に試して、 TextSpan アプリで望ましい視覚効果を実現してください。