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

여러분 안녕하세요.

오늘은 Flutter에서 BuildContext에 대해서 공부하고 가도록 하겠습니다.

BuildContext란 무엇인가??

스캣폴드를 포함하지 않은 Context이다.

"A handle to the location of a widget in the widget tree"

"위젯 tree에서 현재 위젯의 위치를 알 수 있는 정보"

어디에 쓰이는걸까?

우리는 코딩할때마다 이것을 보았다.

모든 위젯은 빌드 메스드를 가지고 있다.

빌드메쓰드로 들어오는 인자 값은 컨텍스트는 타입의 컨텍스트의 인자값을 대입한 스캣폴드 위젯을 리턴한다는 뜻이다.

이 BulidContext는 stateless위젯이나 state빌드 메서드에 의해서 리턴 된 위젯의 부모가 된다.

간단하게라도 정리 했습니다.

오늘은 이만.. 조이코딩연구소 장샘 2021.04.25 오후 11시45분..

여러분 안녕하세요.

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

어제 리스트뷰에 이어서 스낵바를 만들도록 하겠습니다.

스낵바는 뭘까요? 

음식..먹는게 아니라. 

앱 화면의 아래의 잠시 뜨는 팝업 창 같은거에요.

Flutter2.0으로 오면서 Snackbar 사용하는 방법이 바뀌었으니 잘 보도록 하시죠

자 먼저 리스트 뷰에 리스트 타일을 이용하여 하단 메뉴를 더 구성 하도록 하겠습니다.

각 하단별 메뉴를 추가 하였고, 클릭 하였을때 OnTap으로 효과를 주었습니다.

그리고 다음으로 스낵바를 나오도록 버튼을 추가하고 클릭 해보겠습니다.

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, // 배경은 화이트로~

              ),

              otherAccountsPictures: [

                CircleAvatar(

                  backgroundImage: AssetImage('assets/User.jpg'),

                  backgroundColor: Colors.white,

                ),

                // 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은 동그랗게 만들어 주는 상수 값이다. 변경 가능

                ),

              ),

            ),

            ListTile(

              //왼쪽 끝에 아이콘 배치 하는것.

              leading: Icon(

                Icons.home,

                color: Colors.grey[850], //아이콘의 색을 찐하게 해주는 것.

              ),

              title: Text('Home'),

              onTap: () {

                //onTap은 두번 Touch하거나 쭈욱 눌렀을때 이벤트를 할 수 있는 것.

                print('Home is Clicked');

              },

              trailing: Icon(Icons.add), //오른쪽 끝에 배치하는 것 트레일링.

            ),

            ListTile(

              leading: Icon(

                //왼쪽 끝에 아이콘 배치 하는것.

                Icons.settings,

                color: Colors.grey[850],

              ),

              title: Text('Setting'),

              onTap: () {

                print('Setting is Clicked');

              },

              trailing: Icon(Icons.add), //오른쪽 끝에 배치하는 것 트레일링.

            ),

            ListTile(

              leading: Icon(

                //왼쪽 끝에 아이콘 배치 하는것.

                Icons.question_answer,

                color: Colors.grey[850],

              ),

              title: Text('Q&A'),

              onTap: () {

                print('Question is Clicked');

              },

              trailing: Icon(Icons.add), //오른쪽 끝에 배치하는 것 트레일링.

            ),

          ],

        ),

      ),

      body: Center(

        child: ElevatedButton(

          child: Text('Show Me'),

          onPressed: () {

            ScaffoldMessenger.of(context).showSnackBar(

              const SnackBar(

                content: Text('Flutter2.0 Snack method'),

              ),

            );//<-- 여기가!!! 세미 콜론이야!!!!! 온프레스드!!!!

          },

        ),

      ),

    );

  }

}

자 조금씩 플러터 위젯을 공부하고 있습니다.

서서히 앱의 형태가 나타나기 시작하고 있죠? 이렇게 조금씩이라도 공부해서 하나씩 여러분걸로 만든다면

나중에 완전한 앱을 플러터로 만들 수 있겠죠?

그럼 오늘도 이만.. 조이코딩연구소 장샘 2021.04.24 오후 11시43분...

안녕하세요. 여러분

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

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

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

자 이제 코딩을 시작해보죠

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

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

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

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 조이코딩연구소 장샘.

여러분 안녕하세요

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

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);

}

이미지를 추가하기 위하여 일단 왼쪽 종이 모양 아이콘을 누르고

새로운 폴더를 만들어 줍니다.

마우스 오른쪽 버튼을 새로운 폴더 만들기가 있어요

저는 assets라고 폴더를 생성 해봅니다.

폴더를 만드신 뒤 원하는 이미지를 드래그를 하여 assets폴더에 바로 이동 시킵니다. 

그다음에 왼쪽 파일리스트 중 pubspec.yaml 파일로 가봅니다.

그러면 # 주석 처리처럼 활성화가 안되어 있을 겁니다.

이부분을 마우스로 범위를 지정한뒤 ctrl + / 누르면 자동적으로 활성화가 됩니다.

 # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

아래처럼 변합니다. 뿅!!!

그다음에 내가 실제로 불러온 이미지 이름으로 수정해줘야 합니다.

흠.. png 파일은 오류가 발생하네요...

다시 jpg 파일을 다운받아서 했습니다.

이미지를 각 영역에 넣어주고 효과를 주면.

자 그리고 플러터 앱에서 실행했을 때 플러터 앱 위에 debug 띠를 없애는 방법은

플러터 앱을 실행하면 처음 시작 호출되는 위젯 home이 있는 곳에서

      debugShowCheckedModeBanner: false,

로 해주면 사라진것을 알 수 있다.

자 오늘의 정리 들어 갑니다.

1. 플러터 앱 이미지 넣는 방법 
 1) 폴더를 만들어 준다. jpg파일 형태로.. 다른건 왜 안되는지 모르겠네요.
 2) pubspec.yaml에 가서 이미지를 등록시킬 수 있도록 활성화를 시켜준다. 
    활성화 시켜주는 방법은 마우스로 영역을 설정 후에 Ctrl + / 를 누르면 활성화가 된다.
   예)    assets:
    - assets/123.jpg
    - assets/456.jpg

이후에 Ctrl + s를 눌러서 컴파일해보고 오류가 안뜬다면 정상적으로 등록 완료.

3) 이미지를 동그랗게 불러올 수 있는 플러터의 막강한 위젯 기능

CircleAvatar(서클 아바타!!!)를 활용하고

  backgroundImage: AssetImage('assets/456.jpg')를 이용하여 이미지를 넣어준다.
  radius: 60.0,(이미지의 사이즈를 설정해준다.)

4) 플러터 선을 그리는 위젯( 이미지와 이미지 사이의 선을 만들어 주는 위젯 )

   - Divider 이다.

예)    Divider
       height: 60.0, 
       //Divider의 높이를 말하는게 아니라 위와 아래의 위젯의 거리를 표현하는 것이다. 60이면 위30, 아래로 30이다.

       color: Colors.grey[850],  
      thickness: 0.5, //두께
      endIndent: 30.0, //끝에서 부터 어느정도 떨어질것인지 설정하는 것.
 ),

2. 플러터 아이콘 위젯을 이용하여 구현 하자.

플러터 위젯의 Icon은 다양한 형태의 아이콘 위젯을 제공한다. Ctrl + Space를 누르면 항목들이 나온다. 또는 Ctrl 누르고 마우스를 Icon을 클릭하면 나오니 참고 하도록 하자.

 Icon(Icons.check_circle_outline),

 자 지금까지 3번의 걸쳐서 정적인 앱에서 이미지와 텍스트를 이용하여 하나의 플러터 앱 페이지를 만들어 보았습니다.

우리가 한것은 이렇습니다.

앱 페이지의 상단 AppBar에 색을 넣고 글씨를 넣었고

앱 페이지의 메인 Body에 색을 넣고 이미지를 넣고 정렬하고, 글씨를 넣고 정렬하고, 아이콘 위젯을 이용하여 삽입 정렬.

이것이 다다...

너무 많은 것을 공부하고 많은 코딩을 하였는데 허무 한가..

이게 시작이고 이게 반이라고 생각한다.

다양한 알고리즘을 적용하는건 찾아서 적용하고, 기본적인 레이아웃과 정렬, 이미지, 텍스트, 아이콘을 사용했다라는거에

어느정도 자부심을 가져보도록 하자. 

그러면 이만 조이코딩연구소 장샘 2021.04.20 오후 9시8분...

1. Flutter doctor로 문제가 없는 확인 해보자.

2. 비쥬얼 스튜디오 코드로 프로젝트를 만들고 에뮬레이터 실행해보기

3. 안드로이드 스튜디오로 프로젝트 만들고 에뮬리터 실행해보기.

<Flutter doctor 확인하기>

Flutter가 정상적으로 동작되는 확인하기 위한 명령어 이다. Flutter doctor.

하지만 android toolchain 문제가 있네요. 친절하게도 해결하기 위해서는 flutter doctor --android-licenses 하라고 나와있습니다.

계속 그냥 Y를 누른다!! 쭈우우우우욱

완료가 되었으면 다시한번 Flutter Doctor를 실행해 본다.

정상적으로 작동하고 문제가 없다고 난온다!! No issues found!!!!!

---------------------------------------------Flutter doctor 확인하기 끝!! ----------------------------------------------------

2. 비쥬얼 스튜디오 코드로 프로젝트를 만들고 에뮬레이터 실행해보기

비쥬얼 스튜디오 코드를 실행하고 view -> command palette를 클릭 한다.

검색창에 Flutter를 클릭하면 프로젝트 생성하는게 나타난다.

프로젝트를 생성하고 에뮬레이터를 실행해 봅니다.

짜잔 에뮬레이터가 실행 된 것을 볼 수 있습니다.. 첫번째 Flutter 실행 화면 이네요.

3. 안드로이드로 플러터 생성하고 실행해보기

안드로이드 에서 New Flutter Project를 클릭하면새로은 프로젝트를 만들 수 있습니다.

이 프로젝트가 바로 우리 화면에 나올 것이죠.

Flutter Application을 클릭하여 Next!!! 과감히 클릭!!

Project Name은 여러분이 만들고 싶어하는 이름을 쓰면 되고요..

플러터 SDK 경로가 설정이 안되어있을겁니다.

여기를 설정해주셔야 됩니다. 플러터 파일 압축 풀었던 경로 아시죠?

저 경로는 사람마다 다르실거에요. 저는 C드라이브 Project폴더에 압축파일을 풀었거든요.

그리고 패키치 네임 입니다. 이것은 모듬 셋트라고 생각하시면 됩니다.

이름도 그냥 두고 그냥 광클릭 Finish!!!

화면 왼쪽에는 파일들을 보여주고. 오른쪽 화면에는 영어로 된 코딩된 글씨가 쫘악!! 나옵니다.

당장은 우리는 바꾸지 않고 에뮬레이터만 실행해 보도록 해요. 위에 3군데 클릭해서 확인해주세요.

1. SDK 빌드.. 어려우시면 그냥 따라서!!

2. 내가 만들어 놓은 핸드폰 에뮬레이터!! 선택해주시고.

3. 플레이 버튼 클릭!!! 했더니!! 화면이 검은색을 나오시나요?

우리 핸드폰에서 뒤로가기 버튼을 한번 눌러주시면 딱 바로 나옵니다!! 

어때요.. 오늘 저도 여러분도 플러터를 처음으로 실행시켜서 에뮬레이터로 본 날입니다!!

어려울겁니다. 당연히 어려운게 맞고요 누군가 만들고 우리가 공부한다는거 쉬운일은 아닙니다.

하지만 공부를 해야 쉬워지겠죠? 저도 차근차근 해볼테니 여러분도 화이팅 해보시죠. 

그럼 이만 조이코딩연구소 장샘. 2021.04.18 - 오후 12시46분