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

여러분 안녕하세요.

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

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

}

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

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

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

저는 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. 앱의 상단 부분 App Bar를 꾸며준다.
   1) AppBar의 색을 바꿔 준다.
   2) 가운데로 정렬 한다.
   3) 볼록 튀어나온 효과를 없앤다.

2. 앱의 바디 부분을 꾸며준다.
   1) 앱의 바디의 색을 꾸며 준다.
   2) 끌씨를 넣어주고, 글씨에 대한 효과(굵게, 하얀색, 글씨의 간격)을 적용 해본다.
     - Color를 선택할때 Colors.불라 불라 이름을 넣고 마우스 포인트를 올리면 색을 고를 수 있다. 위아래로 스크롤 가능

   3) 텍스트와 텍스트 사이의 샌드박스를 넣어서 각 텍스트의 간격을 넓힌다.
   4) 가로축 정렬을 해준다.
   

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Joy Coding Lab',

      home: Grade(), // Grade라는 위젯을 실행시킨다.

    );

  }

}

class Grade extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Joy Coding Lab'),

        backgroundColor: Colors.amber[600], // 색을 표현할때 직접 값을 넣어 줄수도 있다.

        centerTitle: true,

        elevation: 0.0,

      ),

      backgroundColor: Colors.amber[700],

      body: Padding(

        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),

        child: Column(

          crossAxisAlignment: CrossAxisAlignment.start, // 가로축 정렬을 하기 위한 위젯이다.

          children: [

            Text(

              'Name',

              style: TextStyle(

                //텍스트의 효과를 줄 수 있따. 마우스포인ㄴ트를 누르면 된다.

                color: Colors.white, //글씨의 색

                letterSpacing: 2.0, //글씨의 간격

              ),

            ),

            SizedBox(

              // 텍스트와 텍스트 사이의 안보이는 박스를 넣어서 간격을 넓혀 주는 것이다.

              height: 10.0,

            ),

            Text(

              'Joy Coding',

              style: TextStyle(

                  color: Colors.white,

                  letterSpacing: 2.0,

                  fontSize: 28.0, // 해당 텍스트의 폰트 사이즈를 변경할때 사용 한다.

                  fontWeight: FontWeight.bold), //해당 텍스트의 굵기를 적용할 때 사용 한다.

            )

          ],

        ),

      ),

    );

  }

}

오늘은 여기까지 조금더 할 수도 있으니...

<Summary>

1. crossAxisAlignment: CrossAxisAlignment.start, // 가로축 정렬을 하기 위한 위젯이다

2.  style: TextStyle(  //텍스트의 효과를 줄 수 있따. 마우스포인트를 누르면 된다.

   color: Colors.white, //글씨의 색

   letterSpacing: 2.0, //글씨의 간격

  fontSize: 28.0, // 해당 텍스트의 폰트 사이즈를 변경할때 사용 한다.

  fontWeight: FontWeight.bold), //해당 텍스트의 굵기를 적용할 때 사용 한다.

         )

3. SizedBox(

              // 텍스트와 텍스트 사이의 안보이는 박스를 넣어서 간격을 넓혀 주는 것이다.

              height: 10.0,

            ),

오늘도 수고 하셨습니다..

반복만이 살길이다. 

조이코딩연구소 장샘 2021.04.20 오후 8시12분

여러분 안녕하세요.

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

오늘도 플러터 공부 놓치지 않아야 겠죠?

오늘부터 기초 적인 앱을 만들면서 하나씩 플러터에 대하여 학습 하도록 하겠습니다.

플러터 기초를 배워보고, 플러터 정렬, 플러터 캐릭터에 대하여 공부하도록 합니다.

class MyCard extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold( //실제 앱의 하얀색 도화지가 되는 것이다. 도화지를 하나 사왔다고 생각하자.

        appBar: AppBar( //앱의 상단 부분의 바를 만든다.

      title: Text('JoyCodingLab.'), //앱 상단 부분의 바에 Text를 하나 넣는다.

      centerTitle: true, // 앱의 상단 부분의 바의 정렬을 센터로 해준다.

      backgroundColor: Colors.redAccent, //Color의 색을 바꾼다.

      elevation: 0.0, //엘러그레이션 높이라는 뜻이고 앱의 붕떠 있는 느낌의 효과를 나타낸다.

    ));

  }

}

자 여기까지는 잘 따라 오셨나요? 

해당 코드 말고 그 위에있는 코드들은 이전 시간에 코딩을 다 해놨으니 이어서 해주시면 됩니다.

추가적으로 메인 Body에서의 상단, 중간, 하단의 정렬을 표시 한다.

Column을 마우스로 클릭 하면, 왼쪽에 전구 모양이 나타납니다.

전구를 클릭 하면 Wrap with Center가 보이고 클릭 해줍니다. Center 위젯이 Column위젯을 감싸줍니다. 

그러면 Text는 세로로 쓰여졌고, 이것들을 전체가 가운데로 정렬 됨을 알 수 있습니다.

즉, Body에 Center를 하면 전체가 가운데로 일단 정렬을 시키는 것이다. 라고 생각할수 있지만

상위의 Center 위젯과 child의 Column이 만날때는 조금 다릅니다.

mainAxisAlignment:MainAxisAlignment.center 이것이 실제 화면의 상단, 중앙, 하단의 정렬을 해주는 것이다.

<Summary>

1. AppBar의 Text의 정렬은 centerTitle : ture,

2. AppBar의 색을 바꿔주는건 backgroundColor : Colors.redAccent

3. 앱의 붕뜬 느낌효과 elevation : 0.0 ~ 10.0 (엘러그레이션)

4. Main Body에서 텍스트의 위치를 지정할수 있는 방법은 2가지다.

Padding을 이용하여 왼쪽,오른쪽,위,아래를 조절하는 방법

Body의 메인 정렬과, child 정렬을 이용하여 화면 가로 축, 세로축의 정려를 하는 방법

5. 첫번째 방법은

   Body에 Padding을 한뒤 정확하게 해주기위해 Padding 속성 EdgeInserts.fromLTRB를 이용한다.

   그리고 화면의 상단,중앙,하단의 정렬을 할 때 mainAxisAlignment를 사용한다.

   body: Padding(

        // 자 이제 메인 바디 부분을 넣어 보도록 하자.

        // Padding은 Body 내에서 위치를 조절 할 수 있는 위젯입니다.

        //padding: EdgeInsets.fromLTRB(left, top, right, bottom),//정확한 위치를 넣어 주기 위해서 Padding 속성을 불러 옵니다.

           padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),

           child: Column(

          //해당 위젯을 세로 축으로 사용하고.

          mainAxisAlignment:

              MainAxisAlignment.center, //화면 상에서 상단, 중간, 하단 정렬을 해준다.

          children: [Text('Joy'), Text('Coding'), Text('Lab')], //각각의 텍스트를 써준다.

        ),

      ),

    );

6. 두번째 방법은

 Body에 바로 Center를 해주는 것이다.

  body: Center(

        child: Column(

          //해당 위젯을 세로 축으로 사용하고.

          mainAxisAlignment:MainAxisAlignment.center, //화면 상에서 상단, 중간, 하단 정렬을 해준다.

          children: [Text('Joy'), Text('Coding'), Text('Lab')], //각각의 텍스트를 써준다.

<소스 정리>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

import 'package:flutter/material.dart';

void main() => runApp(MyApp()); // runApp 제일 상위 위젯을 호출한다. 기본적인 뼈대를 만드는것이다.

class MyApp extends StatelessWidget {

  //정적인 의미의 뼈대를 만든다.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      //플러터에서 대부분 가지고 있는 머트리얼앱 위젯을 가져온다.

      title: 'JoyCoding', //앱을 총칭하는 앱의 타이틀이다.

      home: MyCard(), // Home 기본적으로 앱이 실행되면 기본적으로 실행되는 초본이다.

    );

  }

}

class MyCard extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      //실제 앱의 하얀색 도화지가 되는 것이다. 도화지를 하나 사왔다고 생각하자.

      appBar: AppBar(

        //앱의 상단 부분의 바를 만든다.

        title: Text('JoyCodingLab.'), //앱 상단 부분의 바에 Text를 하나 넣는다.

        centerTitle: true, // 앱의 상단 부분의 바의 정렬을 센터로 해준다.

        backgroundColor: Colors.redAccent, //Color의 색을 바꾼다.

        elevation: 0.0, //엘러그레이션 높이라는 뜻이고 앱의 붕떠 있는 느낌의 효과를 나타낸다.

      ),

      body: Padding(

        // 자 이제 메인 바디 부분을 넣어 보도록 하자.

        // Padding은 Body 내에서 위치를 조절 할 수 있는 위젯입니다.

        //padding: EdgeInsets.fromLTRB(left, top, right, bottom),//정확한 위치를 넣어 주기 위해서 Padding 속성을 불러 옵니다.

        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),

        child: Column(

          //해당 위젯을 세로 축으로 사용하고.

          mainAxisAlignment:

              MainAxisAlignment.center, //화면 상에서 상단, 중간, 하단 정렬을 해준다.

          children: [Text('Joy'), Text('Coding'), Text('Lab')], //각각의 텍스트를 써준다.

        ),

      ),

    );

  }

}

------------------------------------------------

class MyCard extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      //실제 앱의 하얀색 도화지가 되는 것이다. 도화지를 하나 사왔다고 생각하자.

      appBar: AppBar(

        //앱의 상단 부분의 바를 만든다.

        title: Text('JoyCodingLab.'), //앱 상단 부분의 바에 Text를 하나 넣는다.

        centerTitle: true, // 앱의 상단 부분의 바의 정렬을 센터로 해준다.

        backgroundColor: Colors.redAccent, //Color의 색을 바꾼다.

        elevation: 0.0, //엘러그레이션 높이라는 뜻이고 앱의 붕떠 있는 느낌의 효과를 나타낸다.

      ),

      body: Center(

        child: Column(

          //해당 위젯을 세로 축으로 사용하고.

          mainAxisAlignment:MainAxisAlignment.center, //화면 상에서 상단, 중간, 하단 정렬을 해준다.

          children: [Text('Joy'), Text('Coding'), Text('Lab')], //각각의 텍스트를 써준다.

        ),

      ),

    );

  }

}

그럼 오늘도 공부 참 잘했어요!! 

꾸준한 사람이 성공하리다.

2021.04.20 am 02:10 조이코딩연구소 장샘

1. Flutter 프로젝트 폴더 구성하기

2. 코드의 기본 내용을 알아보자

3. 앱 페이지 기본 구성 공식을 외워보기

4. Flutter 앱 실행을 해보기.

pubspec.yaml

앱을 만들때 버전 환경등 다양한 셋팅을 하는 곳이다.

android 폴더와 ios 폴더는 앱을 배포할때 정보를 갖고 있다고 생각하면 된다.

가장 중요한건 lib 폴더 입니다. 라이브러리 폴더라고도 부를 수 있고요.

앱을 만들때 여기서 거의 대부분의 작업을 진행 할겁니다.

자 우리는 main.dart의 있는 기본 소스 내용을 지우고 시작을 해보도록 하겠습니다.

플러터 머트리얼을 임폴트 해줘야 된다.

이것은 플러터의 위젯이랑 각종 기능들을 사용하기 위해서 무조건 입력을 해줘야 합니다.

import 'package:flutter/material.dart';

void main() => runApp(Myapp())

=> 함수를 호출해오는 것이다.

플러터의 최상위 함수는 runApp 이 호출 될때 위젯=아규먼트 를 들어와야 된다.

Myapp이라는 위젯(우리가 직접 만들어야 되는 위젯)을 불러온다.

클래스와 함수명

main(), runApp() -> 함수

첫글자를 소문자 넣는다 대부분 함수는.

클래스는 대부분 문자로 한다.

서로 결합한것을 앞에는 대문자. 카멜

MyApp() -> 위젯 

이 MyApp 위젯은 처음에 앱을 구동할때 뼈대를 만드는 역활만을 할것입니다. 정적인 위젯입니다.

정적인 의미의 StatelessWidget 를 만들어 줬고, MyApp이라는 우리만의 커스텀 클래스를 만들었습니다.

MyApp은 Container라는 것을 나를 호출한것에 넘겨주게 되는데 이것을 바꿔보도록 합시다.

우리가 필요한건 앱을 만들기 위한 머트리얼 기능을 가진 위젯입니다 이것을 가져 옵시다.

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container( ------>>return MaterialApp

    );

  }

}

MaterialApp 위젯도 반드시 아규먼트를 가져야만 합니다.

플로터의 모든 위젯들은 아규먼트를 가진다고 생각하면 됩니다.

앱을 총징하는 앱의 타이틀을 만들어 보도록 합니다.

MaterialApp은 타이틀이라는 문자열을 아규먼트로 가지고 있습니다.

ctrl + s 저장하고 바로 에뮬레이터 나올 수 있다.

오늘도 여기까지.. 서서히 머리가 아파 오는것 같지만

어색함이 익숙함이 될때까지 반복과 노력만 있을 뿐.

2021.04.19 오후 9시50분! 조이코딩연구소 장샘.

ㅇ

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분

안녕하세요. 조이코딩연구소 장샘입니다.

본격적으로 구글에서 만든 Flutter(플러터)를 공부를 시작해보려고 합니다.

앱을 개발하기 위해서는 OS를 고려해서 해야 되지만 구글에서 만든 Flutter를 이용하면

안드로이드 OS와 애플 iOS에서 모두 구동이 가능한 앱을 만들수가 있습니다.

Flutter를 하기 위해서는 흔히 알고 있는 Java가 아니라 Dart라는 조금은 생소한 언어를 공부해야 합니다.

저 또한 처음 하는 것이라 기대 됩니다.. 어렵겠지만.. 차근차근 만들어보고 

앱도 만들어 보도록 하죠.

일단 음식을 만들때도 음식을 준비하는것이 가장 중요하듯이

코딩을 하기 위한 환경을 만드는것이 가장 중요하겠죠?

1. 안드로이드 스튜디오 설치

2. 비쥬얼 스튜디오 코드 설치

3. Flutter 다운로드 및 환경설정

3가지를 진행해 주시면 됩니다. 구글에서 검색하시면 바로 설치 가능 합니다.

저는 윈도우10 버전으로 시작하고 있고.

안드로이는 버전 4.1.2를 설치하였습니다. Flutter는 2.0이네요~!

안드로이드 설치 후에는 Configuration에서 Plugin -> Flutter를 설치 해주셔야 됩니다.

물론 Dart도 검색해서 설치 해 주시면 됩니다.

비쥬얼 스튜디오에서는 Extension(ctrl+shift+x)에서 Flutter를 설치해주시면 됩니다.

Flutter를 압축을 풀고 bin 폴더로 가신뒤 폴더의 경로를 복사후에 

윈도우 돋보기에서 시스템 환경변수 클릭 -> 환경변수 클릭 -> 시스템 변수 창에서 Path 를 선택 후 편집

거기서 새로 만들기 후 Flutter Bin 폴더의 경로를 넣어 주시면 됩니다.

자 이렇게 기본적인 설정이 완료 되었습니다. 

이렇게 저지르고 나면 매일매일 얼마나 공부하는지 끄적끄적 기록해보려고 합니다.

그럼 우리 모두 생각을 현실화 할 수 있는 능력을 기를때까지..

모두모두 화이팅.

2021.04.17 오후 11시28일 from 조이코딩연구소 장샘.