Flutterサンプルコード3-アイコンボタンをアプリケーションバーに追加-leadingとactions属性、ボタンonPressed属性


今回はappbarの左と右にアイコンを置きました.
左側に、アイコンボタンまたは単純コンポーネントを左側に配置するプリアンブル属性を使用して、メニューアイコンボタンを表示します.
複数のアイコンボタンなどを右側に置くactionsプロパティを使用して、右側にshopping cart、searchアイコンボタンを入れます.
まず、各ボタンを押下したときの印刷が良好であるか否かも実現される.

AppBarのみの実装


class MyPage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber[600],
        centerTitle: true,
        elevation: 0.0,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print('menu button is clicked');
          },
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              print('shopping cart button is clicked');
            },
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('search button is clicked');
            },
          ),
        ],
        title: Text('OEN'),
      ),
    );
  }
}

全体


//main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'OENOEN',
      home: MyPage()
    );
  }
}

class MyPage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[400],
      appBar: AppBar(
        backgroundColor: Colors.amber[600],
        centerTitle: true,
        elevation: 0.0,
        leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
                print('menu button is clicked');
            },
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              print('shopping cart button is clicked');
              },
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('search button is clicked');
            },
          )
        ],
        title: Text('OEN'),
      ),
      body: Padding(
          padding: EdgeInsets.fromLTRB(30.0, 40.0, 0, 0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Center(
                child: CircleAvatar(
                  backgroundImage: AssetImage('assets/graduate-gonji.jpeg'),
                  radius: 60.0,
                ),
              ),
              Divider(
                height: 60.0,
                color: Colors.grey[850],
                thickness: 0.8,
                endIndent: 30.0,
              ),
              Text('NAME',
              style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 3.0,
              ),
              ),
              SizedBox(
                height: 10.0,
              ),
              Text('OEN',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
                fontSize: 28.0,
                fontWeight: FontWeight.bold,
              ),
              ),
              SizedBox(
                height: 30.0,
              ),
              Text('경력 기간',
                style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2.0,
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
              Text('1.9 year',
                style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2.0,
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(
                height: 30.0,
              ),
              Text('Today I learned',
                style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2.0,
                ),
              ),
              SizedBox(
                height: 7.0,
              ),
              Row(children: [
                Icon(Icons.check_circle_outline),
                SizedBox(width: 5,),
                Text('Flutter',
                  style: TextStyle(
                      fontSize: 16.0,
                      letterSpacing: 1.0
                  ),
                ),
              ],
              ),
              Row(children: [
                Icon(Icons.check_circle_outline),
                SizedBox(width: 5,),
                Text('Dart',
                  style: TextStyle(
                      fontSize: 16.0,
                      letterSpacing: 1.0
                  ),
                ),
              ],
              ),
              Row(children: [
                Icon(Icons.check_circle_outline),
                SizedBox(width: 5,),
                Text('Android Studio',
                  style: TextStyle(
                      fontSize: 16.0,
                      letterSpacing: 1.0
                  ),
                ),
              ],
              ),
              SizedBox(
                height: 20.0,
              ),
              Center(
                child: CircleAvatar(
                  backgroundImage:  AssetImage('assets/transparent.gif'),
                  radius: 30.0,
                  backgroundColor: Colors.amber[400],
                ),
              )
            ],
          ),
      ),
    );
  }
}