본문 바로가기

Flutter (with 코딩셰프)

[2023.11.20] 플러터(flutter) 순한 맛 강좌 14 | AppBar

※ 강좌 12강 ~ 13강은 Dart 문법에 관한 내용으로 생략.

 

<< 소스 코드 >>

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Appbar',
      theme: ThemeData(
        primarySwatch: Colors.red   //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,  //title 영역에서 center 정렬
        elevation: 0.0,     //appbar의 입체감을 0으로 지정
        //leading : 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때 사용
        leading: IconButton(  //IconButton에 이벤트 미지정시 오류 발생
          icon: Icon(Icons.menu), //(햄버거)메뉴 버튼 추가
          onPressed: () {   //Icons.menu 버튼 클릭시 이벤트
            print('menu button is clicked.'); //Debug 콘솔창에 메세지 출력
          },
        ),
        //actions : 복수개의 아이콘 버튼을 오른쪽에 배치할 때 사용
        actions: <Widget>[
          IconButton(  //IconButton에 이벤트 미지정시 오류 발생
            icon: Icon(Icons.shopping_cart),  //쇼핑카트 버튼 추가
            onPressed: () {   //Icons.shopping_cart 버튼 클릭시 이벤트
              print('shopping cart button is clicked.'); //Debug 콘솔창에 메세지 출력
            },
          ),
          IconButton(  //IconButton에 이벤트 미지정시 오류 발생
            icon: Icon(Icons.search), //검색 버튼 추가
            onPressed: () {   //Icons.search 버튼 클릭시 이벤트
              print('search button is clicked.'); //Debug 콘솔창에 메세지 출력
            },
          ),
        ],
      ),
    );
  }
}

 

 

<< 출력 화면 >>

 

 

<< 콘솔창 - 출력 >>

I/flutter (27094): menu button is clicked.
D/EGL_emulation(27094): app_time_stats: avg=88.09ms min=2.43ms max=1519.05ms count=18
I/flutter (27094): shopping cart button is clicked.
I/flutter (27094): search button is clicked.
D/EGL_emulation(27094): app_time_stats: avg=41.90ms min=12.58ms max=583.19ms count=24