facebook twitter hatena line email

「Flutter/UI/Scaffold」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(Admin がページ「Flutter/UI/上部Button」を「Flutter/UI/Scaffold」に移動しました)
 
(同じ利用者による、間の2版が非表示)
行44: 行44:
 
     ];
 
     ];
 
   }
 
   }
 +
</pre>
 +
 +
==上部バーの右に2つボタンを設置==
 +
<pre>
 +
actionsを以下のように変更。
 +
        actions: <Widget>[
 +
          IconButton(
 +
            icon: Icon(Icons.add),
 +
            onPressed: () => setState(() {
 +
                  _count++;
 +
                }),
 +
          ),
 +
          IconButton(
 +
            icon: Icon(Icons.remove),
 +
            onPressed: () => setState(() {
 +
                  _count--;
 +
                }),
 +
          ),
 +
        ],
 +
</pre>
 +
 +
==画面右下にボタンを表示==
 +
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),
 +
      ),
 +
);
 +
 +
==Barを透明に==
 +
extendBodyBehindAppBar: true を追加して、
 +
backgroundColorを Colors.blue.withOpacity(0.3),のようにする。
 +
<pre>
 +
Scaffold(
 +
      appBar: AppBar(
 +
        backgroundColor: Colors.blue.withOpacity(0.3),
 +
        title: Text("タイトル",
 +
            style: TextStyle(
 +
                fontSize: 16,
 +
                locale: Locale("ja", "JP")
 +
            )
 +
        ),
 +
      ),
 +
      extendBodyBehindAppBar: true,
 +
      body: Text("本文")
 +
    );
 
</pre>
 
</pre>

2019年12月19日 (木) 01:57時点における最新版

上部バーの右にボタンを設置

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("$widget.title"),
        actions: _buildAppBarActionButton()
      ),
    );
  }
  List<Widget> _buildAppBarActionButton() {
    return <Widget>[
      MaterialButton(
        onPressed: () {
        },
        child: Text(
          "Setting",
          style: TextStyle(
              fontSize: 14.0,
              color: Colors.white
          ),
        ),
      )
    ];
  }

iconを右上に設定したい場合

flutter/アイコン追加 [ショートカット]

  List<Widget> _buildAppBarActionButton() {
    return <Widget>[
      MaterialButton(
        onPressed: () {
        },
        child: Icon(
          Icons.settings,
          color: Colors.white,
          size: 30.0,
        )
      )
    ];
  }

上部バーの右に2つボタンを設置

actionsを以下のように変更。
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => setState(() {
                  _count++;
                }),
          ),
          IconButton(
            icon: Icon(Icons.remove),
            onPressed: () => setState(() {
                  _count--;
                }),
          ),
        ],

画面右下にボタンを表示

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

Barを透明に

extendBodyBehindAppBar: true を追加して、 backgroundColorを Colors.blue.withOpacity(0.3),のようにする。

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue.withOpacity(0.3),
        title: Text("タイトル",
            style: TextStyle(
                fontSize: 16,
                locale: Locale("ja", "JP")
            )
        ),
      ),
      extendBodyBehindAppBar: true,
      body: Text("本文")
    );