조이 코딩 연구소(Joy Coding Lab.)(수업 및 기타문의 카톡 : jhw2458)

여러분 안녕하세요.

조이코딩연구소 장샘 입니다.

오늘은 App Bar에 버튼들을 만들어 보도록 하겠습니다.

각 버튼을 만들고 아이콘 모양도 넣어보고 Touch를 했을 때 번쩍이는 효과까지 넣어 보도록 할게요.

기본적인 home 위젯인 Mypage를 만들어 주고 Scaffold로 도화지를 꺼내봅니다.

Appbar Icon Menu라는 글씨를 AppBar 중앙에다가 배치 시킵니다.

elevation은 띄움효과였죠? 0.0으로 효과를 없애버리고~

leading이라는 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치시키는 위젯을 불러 옵니다.

그리고 icon의 아이콘 메뉴를 넣어주고, 그리고 버튼을 터치로 눌렀을때 번쩍이는효과! onPressed를 호출!

다음은 action 이라는 건데 이것은 다수의 아이콘 버튼을 오른쪽에 배치할때 사용합니다.

메뉴 형식의 아이콘을 넣고 눌렀을때 번쩍이는 효과를 넣어 줍니다.

생각보다 그렇게 복잡하진 않죠? 

짜잔 우리가 자주 봐왔던 앱의 형태가 조금씩 보이기 시작합니다.

우리가 만들어준 아이콘 바로 아래 그림과 같이 만들어 진거에요.

플러터에서 제공하는 아이콘이 많으니 다양한 형태의 아이콘으로 이쁘게 앱을 만들 수 있을거 같습니다.

소스를 첨부하오니 혹시 필요하신 분은 복사해 놓고 바로 공부 하시기 바랍니다.

감사합니다!! 2021.04.22 조이코딩연구소 장샘. 

import 'package:flutter/material.dart';

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

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: [

          //이곳에 한개 이상의 위젯들을 가진다.

          IconButton(

            icon: Icon(Icons.shopping_cart),

            onPressed: () {

              print('search button is clicked');

            },

          )

        ],

      ),

    );

  }

}