LoginSignup
2
3

More than 1 year has passed since last update.

【Flutter】BottomAppBarで画面最下部にボタン作成

Last updated at Posted at 2021-08-10

背景

アプリ開発中に画面の最下部にbar全体を押下できるボタンが欲しかったが、検索方法が悪いのかなかなか見つからなかったのでメモとして投稿。
画像の様なボタンが欲しい。
スクリーンショット 2021-08-11 3.47.32.png

コード

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('テスト'),
      ),
      // body: ,
      bottomNavigationBar: bottomButton(),
    );
  }

  Widget bottomButton(){
    return BottomAppBar(
      color: Colors.blue,
      child: TextButton(
        child: Text(
          "ボタン",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        style: TextButton.styleFrom(
          primary: Colors.blue,
        ),
        onPressed: (){},
      ),
    );
  }
}

画面

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3636303534342f31323361363437392d306265662d636264642d373530342d3065396266383230376561312e706e67.png

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3