段落内のテキストを太字(または書式設定)にするにはどうすればよいですか?


103

異なるフォーマットのテキスト行を作成するにはどうすればよいですか?

例えば:

Hello World

回答:


219

リッチテキストウィジェットを使用する必要があります。

RichTextウィジェットは、子TextSpansのリストを持つこともできるTextSpanウィジェットを取り込みます。

各TextSpanウィジェットは、異なるTextStyleを持つことができます。

レンダリングするサンプルコードは次のとおりです。HelloWorld

var text = new RichText(
  text: new TextSpan(
    // Note: Styles for TextSpans must be explicitly defined.
    // Child text spans will inherit styles from parent
    style: new TextStyle(
      fontSize: 14.0,
      color: Colors.black,
    ),
    children: <TextSpan>[
      new TextSpan(text: 'Hello'),
      new TextSpan(text: 'World', style: new TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
 );

27

[更新]

以下の回答は、段落ではなく、いくつかの単語に最適です。特定のテキストをフォーマットする必要がある長い文または段落がある場合は、上記の回答で@DvdWasibiによって提案されているようにリッチテキストを使用することをお勧めします

[古い答え]

コードを短くクリーンに保つのが好きです。これは、2つのテキストフィールドを1つは通常のフォントで、もう1つは太字で行に追加する方法です。

注:これは、長い段落では見栄えが悪く、見出しなどでは見栄えがよくない場合があります。

Row(children: <Widget>[
      Text("Hello"),
      Text("World", style: TextStyle(fontWeight: FontWeight.bold))
    ])
`

あなたは「ハローとして所望の出力を得るべきである世界


8
あなたがテキストの段落を持っているつもりなら、これは素晴らしい考えではありません。行内の各Text()は、独自の垂直/水平スペースを作成します。
ムハンマドアディル

では、Rowを使用する代わりに何が必要ですか?そして、私は別のフォーマットで横にテキスト側をしたい場合
maheshmnj

3
@Dvdwasibiからの上記の回答を見て、大きな段落で実装を試してみると、2つの異なる段落が並んでいることがわかります。あなたの答えは2/3の単語については正しいですが、段落については正しくありません。
ムハンマドアディル

1
同意しました。回答を更新しました。ありがとうございます。:)
maheshmnj

どういたしまして.. :)
ムハンマドアディル

9
return RichText(
  text: TextSpan(
    text: 'Can you ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'find the',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.wavy,
        ),
        recognizer: _longPressRecognizer,
      ),
      TextSpan(text: 'secret?'),
    ],
  ),
);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.