🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

1435閲覧

Flutter公式サイトのRichTextのサンプル内の「DefaultTextStyle.of(context).style」について

Risney

総合スコア148

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2020/12/09 07:23

編集2020/12/09 07:32

前提・実現したいこと

「DefaultTextStyle.of(context).style」の仕様を理解したい。

発生している問題・エラーメッセージ

まずは以下に公式のサンプル
まるっと貼り付けたので確認して頂きたいです。

flutter

1RichText( 2 text: TextSpan( 3 text: 'Hello ', 4 style: DefaultTextStyle.of(context).style, 5 children: <TextSpan>[ 6 TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)), 7 TextSpan(text: ' world!'), 8 ], 9 ), 10)

上記のコードで実装すると何が起きるかというと、
以下の画像の様に真っ白で何も表示されない。
イメージ説明

理想のコード(?)

理想というか、
自分の認識では以下の流れで使うものかと思っています。
❶「Hello」の段階でデフォルトであるスタイルを決定する。(黒文字、フォントサイズ30)
❷children: <TextSpan>[]内で「DefaultTextStyle.of(context).style」を使用することで「world!」の文字に❶で指定したスタイルが適用される
❸インラインで他のスタイルを適用する場合のみ、別でスタイルを指定する(「bold」のみデフォルトではないスタイルにする)

それを踏まえて以下のコードに書き換えました。

flutter

1RichText( 2 text: TextSpan( 3 text: 'Hello ', 4 style: TextStyle(color: Colors.black,fontSize: 30),//デフォルトを黒文字、フォントサイズ30指定 5 children: <TextSpan>[ 6 TextSpan( 7 text: 'bold', //↓デフォルトとは違うスタイルを指定 8 style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blue,fontSize: 48), 9 ), 10 TextSpan(text: ' world!', style: DefaultTextStyle.of(context).style),//デフォルト設定 11 ], 12 ), 13 ),

そうすると、
文字が全て表示され、
「Hello」で指定したスタイルが「world!」にも適用されました。
イメージ説明

もし仕様の認識が違っていたら、ご指摘いただければ幸いです。
宜しくお願い致します。

追記

自己解決はしましたが、
他にも見解等あれば、ご意見お待ちしております。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

デフォルトの文字色が白だった件について

もしかして…と思いアプリの背景色をグレーにしてみたら、
白文字で表示されていました。

![イメージ説明

flutter

1import 'package:flutter/material.dart'; 2 3void main() { 4 runApp(MyApp()); 5} 6class MyApp extends StatelessWidget { 7 @override 8 Widget build(BuildContext context) { 9 return MaterialApp( 10 theme: ThemeData( 11 scaffoldBackgroundColor: Colors.blueGrey, 12 ), 13 home: Scaffold( 14 appBar: AppBar( 15 title: Text('【Flutter#41-2】RichText'), 16 ), 17 body: Center( 18 child:RichText( 19 text: TextSpan( 20 text: 'Hello ', 21 style: DefaultTextStyle.of(context).style, 22 children: <TextSpan>[ 23 TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 48)), 24 TextSpan(text: ' world!'), 25 ], 26 ), 27 ) 28 ) 29 ), 30 ); 31 } 32}

公式のサンプルがまぎらわしい(?)

公式のページのサンプルを見るとあたかもサンプルのコードで実装したら以下の画像になりますよ?
って言っているようなもんですよね?騙された…。

イメージ説明

そしてお騒がせしました。

投稿2020/12/09 07:31

Risney

総合スコア148

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問