「Flutter/UI/Text」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→右側にアイコン追加) |
(→スクロール付きテキスト) |
||
| (同じ利用者による、間の5版が非表示) | |||
| 行51: | 行51: | ||
borderRadius: BorderRadius.circular(10), | borderRadius: BorderRadius.circular(10), | ||
), | ), | ||
| − | child: Text( | + | child: Text("hoge") |
| − | ), | + | ), |
| + | </pre> | ||
| + | |||
| + | ==スクロール付きテキスト== | ||
| + | <pre> | ||
| + | ListView( | ||
| + | children: [ | ||
| + | Container( | ||
| + | padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 10.0) | ||
| + | + MediaQuery.of(context).padding, | ||
| + | child: Center( | ||
| + | child: Text("1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890") | ||
| + | ) | ||
| + | ) | ||
| + | ], | ||
| + | ); | ||
| + | </pre> | ||
| + | |||
| + | ==一行表示== | ||
| + | <pre> | ||
| + | Text( | ||
| + | '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章', | ||
| + | overflow: TextOverflow.ellipsis, | ||
| + | ), | ||
</pre> | </pre> | ||
2020年1月6日 (月) 02:03時点における最新版
body内に複数行textを表示
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'hello',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
RaisedButton(
child: Text('Back to MyPage 1'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
色追加
Text(
'警告!',
style: TextStyle(
color: Colors.red,
),
)
右側にアイコン追加
trailingの部分
ListTile(
leading: ExcludeSemantics(child: CircleAvatar(child: Text(item))),
title: Text('This item represents $item.'),
subtitle: secondary,
trailing: Icon(Icons.info, color: Theme.of(context).disabledColor),
),
テキストを丸で囲む
new Container(
padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 1.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue),
borderRadius: BorderRadius.circular(10),
),
child: Text("hoge")
),
スクロール付きテキスト
ListView(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 10.0)
+ MediaQuery.of(context).padding,
child: Center(
child: Text("1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890")
)
)
],
);
一行表示
Text( '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章', overflow: TextOverflow.ellipsis, ),
