Flutter 두 번째 강의 내용

플러터 첫 프로젝트 만들기

Visual Studio Code에서 커멘드 창을 연다. 단축키로는 command + shift + p이고 직접 실행하는 방법은 View에서 Command Palette이다.

 

Flutter: New Project를 누르면 아래와 같은 사진이 나오는데 Application을 클릭한다.

 

그러면 이제 폴더를 선택하는 창이 나온다. 원하는 폴더에 위치시키고 Select a folder to create the project in을 누르면 된다.

 

이제 원하는 프로젝트 이름을 입력해주면 된다.

 

Flutter 폴더 구조 확인하기

플러터를 프로젝트를 만들면 많은 양의 폴더와 파일들이 생성되는데 겁먹지 말고 사용하는 것만 주로 사용한다고 한다.

초급에서 볼 필요 없는 것들

.dart_tool, .idea, flutter_scrap.iml, pubspec.lock, README.md 파일 등이 있다.

차츰차츰 알아서 습득 될 것들

android, ios, linux, macos, web, windows, test 등이 있다.

초급 이어도 필수로 알아야 할 것들

lib, pubspec.yaml 이 있다.

lib 폴더

흔히 Library 폴더라고 한다. 줄여서 lib이라고 표기한다.

우리가 작성하는 모든 코드가 lib 폴더에서 작성된다.

기본적으로 main.dart 파일이 들어가 있다.

pubspec.yaml

앱을 만들 때 필요한 패키지나 이미지, 폰트 등을 등록하는 설정 파일이다.

main.dart

앱의 시작점이라서, 이 파일이 없으면 오류 나고 실행이 안됨

플러터 프로젝트 생성 시에 기본적으로 생성되는 파일

실행할 디바이스 선택

visual studio Code 하단 바에 macOS를 클릭한다.

 

클릭하면 상단에 어떤 디바이스를 선택할 것인지 창이 나온다.

 

이제 프로젝트를 실행시키면 된다.

프로그램의 시작점

1. lib/main.dart 실행
2. main.dart 안의 main을 찾기
3. main 안에 runApp을 찾기

import 'package:flutter/material.dart';
// ignore_for_file: prefer_const_constructors

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

1. material.dart라는 패키지를 사용하겠다.
2. main을 실행하면, runApp을 실행시킬 것이고, runApp은 MyApp을 실행시킨다.

새로운 줄에서 stl만 입력하면 자동으로 Flutter stateless Widget이라는 영역이 생긴다.

Flutter stateless Widget을 선택한다. 자동완성 기능이라고 생각하면 된다. 정식 명칭으로는 snippet이다

 

return Container() 부분을 MaterialApp으로 변경한다.

 

글자가 왼쪽 상단에 잘려서 보이는 것을 확인할 수 있다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text("안녕하세요 키키"),
      ),
    );
  }
}

MaterialApp 위젯

• 구글은, 일관성 있는 모바일 디자인을 추구했는데, 그 결과 구글의 머티리얼 디자인이 탄생했다. https://material.io/design/ 에서 확인할 수 있는 디자인 가이드가 있다.
• 그 일관성 있는 디자인을 사용할 수 있도록 초기 틀을 잡아주는 역할
• 즉, 그림 그리기 전 도화지를 준비해 놓는 것과 같다고 생각하면 좋다.
• 가장 최상위의 위젯 (최상위의 부모)라서 단 하나의 MaterialApp 안에 여러 위젯들이 살 수 있음

Scaffold 위젯

• 그래서 그 머티리얼 위젯을 사용할 수 있도록 실제 건축 준비를 해주는 친구
• Scaffold 위젯에 AppBar 위젯을 넣을 수도 있고, 공중에 떠있는 버튼도 넣어볼 수 있다

MaterialApp + Scaffold는 짝꿍이고, 99%의 모든 앱이 함께 쓰고 있다. 같이 쓰는 위젯 정도로 외우면 좋다

SafeArea 위젯 디바이스마다, 카메라 노치나 아이폰 M자 탈모 등의 요소 화면 시작점이 각각 다르니 시작점을 통일하기 위해 사용

import 'package:flutter/material.dart';
// ignore_for_file: prefer_const_constructors

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Text("안녕하세요 키키"),
        ),
      ),
    );
  }
}

Text 위젯

글자나 숫자 등을 화면상에 보여줄 때 사용하는 위젯, 바로 반드시 String형태의 데이터를 넘겨주자 이때 Strin형태의 데이터란, 따옴표로 감싼 문자열이다.

Center 위젯

자식 위젯을 가운데로 위치할 수 있도록 능력을 주는 부모

import 'package:flutter/material.dart';
// ignore_for_file: prefer_const_constructors

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Text("안녕하세요 키키"),
          ),
        ),
      ),
    );
  }
}

AppBar 위젯

어플에서 앱바를 그려줄 수 있는 위젯, 반드시 부모 위젯이 Scaffold여야 한다. 왜냐하면, Scaffold위젯 기능 중에 AppBar를 쓸 수 있는 기능이 있기 때문임.

여기서 알 수 있는 Scaffold 기능

1. AppBar에 위젯을 넣을 수 있다.
2. Body에도 위젯을 넣을 수 있다.

import 'package:flutter/material.dart';
// ignore_for_file: prefer_const_constructors

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("내 정보 앱"),
        ),
        body: SafeArea(
          child: Center(
            child: Text("안녕하세요 키키"),
          ),
        ),
      ),
    );
  }
}

 

그리고 앱바에는 다양한 기능을 넣어줄 수 있는데, 테스트해보기 좋은 기능들은 다음과 같다 ( backgroundColor, centerTitle )

 

bool, 불리언이라고 불리며 값은 진실(true) 혹은 거짓(false)밖에 없다. 여기에서는 파란색으로 색깔이 구분된다.

centerTitle: false,

Column 위젯

텍스트로 개행 문자(\n)를 넣어서 해줄 수 있지만, 위젯은 다음 줄에 못 넣는다. 위젯들을 수직방향으로 나열하고 싶을 경우 사용한다, child가 아닌, child의 복수형인 children을 사용한다 (다수의 위젯을 갖기에)

• 기본값으로, 수직적으로 빈 영역이 있으면 다 차지해버리는 설계 방식

import 'package:flutter/material.dart';
// ignore_for_file: prefer_const_constructors

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          centerTitle: false,
          title: Text("내 정보 앱"),
        ),
        body: SafeArea(
          child: Column(
            children: [
              Text("안녕하세요 키키"),
              Text("안녕하세요 키키"),
              Text("안녕하세요 키키"),
            ],
          ),
        ),
      ),
    );
  }
}

 

Image.network 위젯

모든 이미지를 불러와서 사용할 수 있다. 하지만, 이미지를 어디서 가져오냐가 중요하다.

1. 이미 업로드돼있는 네트워크를 통해 (인터넷, 웹)에서 가져올 경우 = Image.network()

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          centerTitle: false,
          title: Text('내 정보 앱'),
        ),
        body: SafeArea(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Image.network(
                '<https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjEwMDNfNTMg%2FMDAxNjY0ODAyNTk1OTMx.y-L9TXW9UQd4RjloZNI8_O8rKTZyfvbp2fLF2eZzNPog.zPQxjOaiSPPEkuDUFUWxJGzahFjzxybxVQz1SFy1pYwg.JPEG.kmcmodooall%2F1664802595768.jpg&type=sc960_832>'),
            Text('이름: 박현성'),
            Text('나이: 26'),
            Text('성별: 남자'),
          ],
        )),
      ),
    );
  }
}

 

현재까지 배운 데이터 타입은 (String, int, bool, widget) 총 4가지, 근데 위젯마다 사용하는 방법이 다르다.

예를 들어서

1. Center 위젯의 child는 Widget을 넣을 수 있다.
2. Text 위젯의 값은 String만 넣을 수 있다.
3. Scaffold 위젯의 키 appBar의 값은 Widget만 넣을 수 있다.
4. Scaffold 위젯의 키 body의 값은 Widget만 넣을 수 있다.
5. Image.network 위젯의 값은 String만 넣을 수 있다.

Tips.

// ignore_for_file: prefer_const_constructors

위의 코드를 주석 달린 채로 작성하면 파란색 물결 밑줄 표시가 사라진다.

 

부모 자식 관계 자동완성

command +  . 이다.