facebook twitter hatena line email

Flutter/UI/Text

提供: 初心者エンジニアの簡易メモ
移動: 案内検索

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,
),