Flutter/UI
提供: 初心者エンジニアの簡易メモ
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); }, ), ], ), ),
body内にボタンを表示
body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'hello', ), RaisedButton( child: Text('button1'), onPressed: () { // ボタン処理 }, ), ], ), ),
画面右下にボタンを表示
floatingActionButtonをScaffoldの項目に追加
return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'hello', ), ], ), ), floatingActionButton: FloatingActionButton( onPressed:() { // ボタン処理 }, tooltip: 'Increment', child: Icon(Icons.add), ), );
入力フォーム
TextFormField( decoration: InputDecoration( labelText: 'Enter your username' ), ),
複数行入力フォーム
Container( margin: EdgeInsets.all(8.0), // hack textfield height padding: EdgeInsets.only(bottom: 40.0), child: TextField( keyboardType: TextInputType.multiline, maxLines: 6, decoration: InputDecoration( hintText: "テキストを作成", border: OutlineInputBorder(), ), autofocus: true, onChanged: (text) { // value = text; }, ), ),
入力フォームにデフォルトで文字入力
TextEditingController _controller; @override void initState() { super.initState(); // _controller = new TextEditingController(text: 'hogehoge'); // これでもよい _controller = new TextEditingController(); _controller.text = "hogehoge"; } // 略 child: TextField( controller: _controller, keyboardType: TextInputType.multiline, ),
参考:https://stackoverflow.com/questions/43214271/how-do-i-supply-an-initial-value-to-a-text-field