Flutter 1부터 배우기 : UI의 구성-2 [쉬운 앱 화면 그리기]

개발하자 백조·2022년 4월 10일
1
post-thumbnail

아직 1편을 안봤다면? 1편 보러가기


반갑습니다 여러분! 코딩백조입니다🦢

지난 시간에 이어서 오늘은 드디어 샘플 앱을 만들어볼 시간입니다~!!

오늘 나오는 코드를 다 이해하려고 하지 않으셔도 됩니다.
그냥 익숙해질 수 있도록 많이 보고 큰 틀만 잡아봅시다!

그렇다면 이제 시작! 🤩


아래 사진을 한번 볼까요?
과연 이 화면에는 몇 개의 위젯이 숨겨져 있을까요?

일단...
상단바, 이메일 칸, 비밀번호 창, 로그인 버튼이 보이네요.

여기서 끝일까요?
상단바에 있는 제목도 위젯이고,
이메일 칸에 있는 Email이라는 텍스트도 위젯이고,
이메일 칸 아래에 나오는 경고 문구도 위젯이고,
로그인 버튼 안에 있는 글씨도 위젯입니다.

더 깊게는 안 나가겠지만 이 앱 화면도 위젯이고 스크롤도.....🤭

(세상에..)

화면이라는 것은 나누고 나누다보면 우리의 예상보다도 작은 요소들로 쪼개집니다.

그렇기 때문에 먼저 큰 틀을 잡고 그 후에 하나씩 기능을 넣어보는 연습을 해보도록 하겠습니다!!


안드로이드 스튜디오를 켜서 새로운 프로젝트를 만들어주도록 하겠습니다.

새로운 프로젝트 만드는 법?

오늘 만들어볼 것은 간단히 텍스트로 자기소개를 하는 화면입니다!
Text, Row와 Column을 사용하여 앱을 만들어보겠습니다.

프로젝트 이름은 row_column으로 지어주도록 하겠습니다!

먼저 화면 분석을 해볼까요?

상단바를 제외한 화면을 보면, 3줄로 글씨가 있고 첫 번째 줄은 절반이 나눠져 있네요.
Row와 Column이 어디에 해당될 지 조금 감이 오시나요?

Column에 자식을 3개를 넣어서 3줄로 화면을 만들고,
첫 번째 자식에 Row를 주어서 칸을 2개로 늘려주도록 하겠습니다!

앞으로 코드가 나오면, 블럭 단위로 이해해주시면 편할 것 같습니다.ㅎㅎ

너무 걱정 말고 시작해봅시다!😎


main.dart에 있는 코드 중, 7번째 줄부터 끝까지 다 지워주겠습니다.
class MyApp extends StatelessWidget {
이 부분부터 끝까지 지워주시면 됩니다!

여기를 보고 따라해주세요! MyApp 만들기!

저희가 방금 만든 친 코드는 stateless widget을 만드는 코드로, state가 변동되지 않는 앱 화면을 만들 때 사용할 수 있습니다.
MyApp이라는 위젯을 만든 것이죠!

return Container(); 에서 컨테이너를 지우고 return MaterialApp();으로 바꿔주겠습니다.

그리고 MaterialApp이 가져야 하는 필수 항목인 home을 설정해주겠습니다. home에는 앱 화면을 구성해주는 위젯인 Scaffold를 넣어줍니다.

return MaterialApp(
      home: Scaffold(),
    );

이제 Scaffold 안에 기본 구성 요소를 넣어줍니다!
appBar과 body를 지정해주어야 합니다. 지난 시간에 들은건데, 기억 나나요?😉

appBar: 에는 AppBar()을,
body: 에는 Column()을 넣어줍니다.

샘플 앱 사진을 보면 파란색 제목 아래로 세 줄의 칸이 있죠?
세로로 화면을 분할하고 싶기 때문에 Column을 써줄 예정입니다!

AppBar의 필수 구성 요소인 title: 을 넣어주면 기본적인 토대는 끝나겠네요!👌

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("플러터 스터디"),
        ),
        body: Column(),
      ),
    );
  }
}

제 main.dart 파일 입니다. 비슷하게 따라오고 계신가요?ㅎㅎ

분량 상 두 편으로 나눠서 가겠습니다!

다음 수업도 들어오실 거죠? 🤩

profile
개발자로서 100가지 일을 해보고 싶은 조경현의 개발 블로그

0개의 댓글