flutter - appBar에 메뉴 아이콘 추가

[코드]

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AppBar',
      theme: ThemeData(
        primarySwatch: Colors.red
      ),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Appbar icon menu'),
        centerTitle: true,
        elevation: 0,

        // 메뉴 아이콘을 생성하는 구문//
        // leading -> 간단한 위젯이나 icon등을 앱바 타이틀 왼쪽에 배치할 때 사용
        // 앱바 말고 다른 곳에서도 자주 사용한다. (listTile)
        leading: IconButton(          
          
          // 노란 전구를 클릭하면 메뉴 아이콘을 클릭했을 때 어떤 행동을 할지 작성할 수 있다.
          icon: Icon(Icons.menu),     
          
          // 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의하는 곳
          onPressed: () {             
            print('menu butten is clicked');
           },
        ),

        actions: [          //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');
           },
          ),

        ],      
      ),
    );
  }
}

 

 

 

[leading]

 

 

 

[onPressed]

 

 

[actions]

 

 

 

[결과 화면]

 

 

 

 

-> 버튼을 클릭할 때마다 콘솔창에 문장이 출력된다.

 

 

 

- 본 내용은 유튜버 코딩쉐프님 영상의 학습 정리입니다.