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

안녕하세요. 여러분

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

오늘은 앱 페이지에서 왼쪽 상단 메뉴를 눌렀을 때 내 개인 정보와 항목들이 나오는걸 만들어 볼거에요.

왼쪽 메뉴를 누르면 아래 사진처럼 나오는걸 만들거에요.

자 이제 코딩을 시작해보죠

이 부분은 더 이상 설명이 필요 없겠죠?

실제 리스트 뷰에서 사용자 계정 쪽 이미지와 글씨 등 효과를 주는걸 쉽게 주석 설명을 달아 놨습니다.

실제 코드를 아래에 넣어 드립니다.

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.blue,

      ),

      home: MyPage(),

    );

  }

}

class MyPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(// 흰 도화지를 꺼내자.

      appBar: AppBar(// App Bar를 만들자

        title: Text('Joy Coidng Lab Menu'),// 앱 바에 글씨를 써준다.

        centerTitle: true,// 가운데로 글씨를 정렬하자.

        elevation: 0.0,//올록이 효과를 없앤다.

        actions: [//앱 바에 아이콘 들을 배치하자.

          IconButton(// 아이콘 버튼 형태를 만들자.

            icon: Icon(Icons.shopping_cart),//아이콘 쇼핑 카트 아이콘을 넣어보자.

            onPressed: () {// 버튼 클릭했을때의 번쩍효과!!

              print('menu button is clicked');

            },

          ), //리딩 속성을 불러 옵니다.

          IconButton(

            icon: Icon(Icons.search),

            onPressed: () {

              print('menu button is clicked');

            },

          ), //리딩 속성을 불러 옵니다.

        ],

      ),

      drawer: Drawer(//왼족 햄버거 모양의 메뉴를 만들어보자.

        child: ListView(//클릭했을때 리스트 메뉴를 만들자.

          padding: EdgeInsets.zero,//빈공간을 만들지 말자.

          children: [

            UserAccountsDrawerHeader(//메뉴 중에 사용자 헤드 메세지 부분을 만들자.

              currentAccountPicture: CircleAvatar(// 이미지는 동그랗게 꾸며주고.

                backgroundImage: AssetImage('assets/bonobono.jpg'),//내가 이미지 삽입

                backgroundColor: Colors.white,// 배경은 화이트로~

              ),

              accountName: Text('JoyCoding'),//사용자 계정에는 이부분을 꼭 써줘야 한다.

              accountEmail: Text('jhwjhw2580@gmail.com'),//사용자 계정에는 이부분을 꼭 써줘야 한다.

              onDetailsPressed: () {//리스트 뷰 화면에서 화살표 모양의 오른쪽에 버튼 생성.

                print('arrow is clicked');

              },

              decoration: BoxDecoration(//사용자 계정 이미지를 동그랗게 꾸며준다.

                  color: Colors.blue[200],

                  borderRadius: BorderRadius.only(//사각형 이미지의 아래쪽을 동그랗게 만든다.

                    bottomLeft: Radius.circular(40.0),//40.0은 동그랗게 만들어 주는 상수 값이다. 변경 가능

                    bottomRight: Radius.circular(40.0),//40.0은 동그랗게 만들어 주는 상수 값이다. 변경 가능

                  ),

                ),

            ),

          ],

        ),

      ),

    );

  }

}

자 오늘도 알차게.. 쉬지 않고 달렸습니다.

꾸준함이 여러분을 성공적인 코딩의 세계로 이끌어 줄거라 확신합니다.

저도 그렇기 때문에 하루도 빠지지 않고 작성하도록 하겠습니다.

오늘도 이만.. 2021.04.23 조이코딩연구소 장샘.

여러분 안녕하세요.

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

오늘은 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');

            },

          )

        ],

      ),

    );

  }

}

여러분 안녕하세요

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

Flutter2.0을 공부하면서 기본적인 화면 구성 방법과 이미지 넣어보고 정렬까지 해봤습니다.

이제 본격적으로 코딩 공부를 해볼텐데요.

Flutter에서 사용하는 언어 구글에서 만든 Dart 라는 언어 입니다.

언어를 모른다는 가정하에 최대한 쉽게 적어 보도록 하겠습니다.

Dart 언어를 공부 할때 중요한 부분이 바로 Class(클래스)와 Widget(위젯) 입니다.

클래스란 무엇일까요?

뜻 그대로 생각해 보시죠~~

학교?

수업??

사람의 속성 눈,코,입

사람의 기능 : 말하기, 듣기, 걷기, 먹기

자 위의 속성과 기능의 차이를 아시겠습니까?

자 아파트를 클래스로 표현을 해보죠.

아파트의 속성 : 공간, 인테리어, 제품

아파타의 기능 : 주거 목적

저것이 바로 클래스이고 모델하우스에서 한곳의 집만 보여주죠?

그것이 바로 클래스 개념이고 이것들을 마구마구 찍어서 똑같이 만들어 낼수 있는 걸

바로 인스턴스라고 합니다!!!

101호, 102호, 201호, 202호 등등등

객체가 가져야 하는 속성과 기능을 정의한 내용을 담고 있는 역할

프로그래밍 상에서의 객체란

클래스가 정의된 후 메모리상에 할당되었을때 이를 객체라고 함

 
구글에서 Dart를 검색하시면 프로그램을 바로 해볼수가 있습니다.

class Room{

  int size;//멤버 변수

  String funiture;

  int cost;

  Room(int size,String funiture,int cost){//생성자 만들기

    this.size = size;//멤버 변수

    this.funiture = funiture;

    this.cost = cost;

  }

}

int addNumber(int num1, int num2){

  return num1 + num2;

}

main(){

  Room a_101 = new Room(34,'전자렌지',5000000);

  Room a_102 = new Room(23,'에어컨',2500000);

  a_101.size = 10;

  a_101.funiture = '옷장';

  print(a_101.funiture);

  print(a_101.cost);

  print(a_102.cost);

  int a = addNumber(123123,42424);

  print(a);

}