Flutter_app bar icon button

Flutter_app bar icon button 만들기

✍ app bar icon button을 만들기 위해 알아야 할 것

✔ leading : 아이콘 버튼이나 간단한 위젯을 app bar title왼쪽에 배치할 때

✔ actions : 복수의 아이콘 버튼 등을 app bar title오른쪽에 배치할 때

✔ onPressed : 반환 값이 없는 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의하는 곳

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
//myapp 위젯 만들기, app의 뼈대를 만드는 역할, 정적인 위젯 -> stateless로 만들어야함

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Appbar',
      theme : ThemeData(
        primarySwatch: Colors.red
      ),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Appbar icon menu'),
        centerTitle: true,
        elevation: 0.0,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: (){
            print('menu button is clicked');
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: (){
              print('Shopping cart button is clicked');
            },
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: (){
              print('Search button is clicked');
            },
          ),
        ], //1개 이상의 위젯 리스트를 가짐
      ),
    );
  }
}

[결과]

출처 : 코딩셰프(유튜브)