4. Flutter2.0(플러터) 기본 앱 만들면서 공부하기(1)

여러분 안녕하세요.

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

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

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

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

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