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

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

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

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

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