플러터 기초쌓기

플러터 기본 개념들

 

위젯

 

플러터에서 화면 안의 요소들은 모두 위젯이다.

하나의 큰 위젯 안에는 여러 위젯들이 들어가 있고, 그 위젯 안에도 다른 위젯들이 들어가 있는 형태이다.

 

MyWidget(
  title: "위젯",
  description: "위젯예제다.",
  child: AnotherWidget(
    // 자식 위젯 안에 또 다른 위젯을 선언할 수 있다.
  )
)

 

플러터 내에서 작성되어 있는 클래스로 객체를 생성하며 이 객체가 화면 속 위젯이 된다. 

 

 

상태관리

 

상태관리는 setState()를 활용해 할 수 있다.

 

bool isbtnOn;

setState() {
	isbtnOn = !isbtnOn;
}

 

버튼의 상태변경을 간단하게 구현한 코드

 

 

Stream

 

데이터를 불러오는데 시간이 오래 걸리거나, 지속적으로 데이터를 받아야 하는 경우엔 스트림을 통해 구현한다.

 

스트림은 데이터 생산 영역과 데이터 사용 영역을 구분해 구현되며,

생산 영역을 사용 영역이 "구독"하여 그 변화를 확인할 수 있다.

 

 

 

플러터 기본 프로젝트 구조파악

 

플러터 프로젝트 생성

 

cmd + shift + p로 명령팔레트 열기 > flutter 검색 > New Project 선택

 

 

프로젝트 구조 살펴보기

 

프로젝트 폴더에 들어있는 것들

 

.으로 시작하는 파일들은 고려할 필요 없는 설정 파일들이다.

여기서 pubspec.yaml, lib 폴더 안의 main.dart에 대해 자세히 알아보자.

 

 

pubspec.yaml

pubspec.yaml 파일은 프로젝트에서 필요한 모든 설정값들은 다루는 마크업 파일이다.

 

dependencies엔 기본적으로 flutter와 cupertino_icons가 설정되어 있다.

외부 패키지를 가져와야 할 경우엔, 이 파일에 버전과 함께 작성해 설치를 진행할 수 있다.

 

파일 저장 후엔 pub get을 해줘야 변경사항이 적용이 된다.

 

 

1. 이미지 가져오기

 

61번째 줄에 위치

 

여기다 이미지 폴더(이미지)의 경로를 쓰면 된다.

 

 

2. 폰트 가져오기

 

61번째 줄에 위치

폰트 이름을 설정하고, asset을 추가하면 된다.

 

 

main.dart

 

main.dart는 lib 폴더 내에 위치해 있으며

lib폴더엔 프로젝트 내의 모든 소스코드가 저장된다.

 

 

기본적인 플러터 패키지를 불러오는 코드

 

 

MyApp이라는 클래스를 실행시키는 함수

 

 

StatelessWidget(상태변경이 없는 위젯)을 상속하여 MyApp을 정의하는 코드

MyApp 클래스는 하나의 위젯이다.

 

 

모든 위젯들은 공통적으로 Widget build(BuildContext context) {} 메서드를 가지고 있다.

이는 부모 위젯인 StatelessWidget(StatefulWidget)이 메서드이므로 @override가 붙어있다.

 

 

MyApp 클래스는 MaterialApp을 반환하고 있다.

MaterialApp은 가장 큰 위젯이며, 프로퍼티에는 title(제목), theme(테마), home(띄울 페이지)이 있다.

 

 

앱 실행시키기

 

vscode 우측하단에 "{} dart" 옆에 있는 거 눌러서

 

 

애뮬레이터 선택

 

 

vscode창 클릭 > 실행 > 디버깅 없이 실행

처음 실행하면 좀 오래 걸린다.

 

 

실행화면

 

코드 수정 후 저 번개모양(Hot-Reload)또는 crtl + s를 눌러서 수정된 내용을 적용시킬 수 있다.

저장을 했는데도 Hot-Reload 기능이 적용되지 않는다면

번개모양 아이콘 옆에 있는 새로고침 아이콘(Hot-Restart)을 누르면 된다.

 

 

기본 위젯 사용법

 

Container

 

Container는 위젯을 감싸는 상자의 역할을 하는 위젯으로 html의 div와 비슷하다.

Container엔 child가 필요하므로, Text() 위젯을 적용했다.

Container는 여백을 설정할 수 있는 padding 프로퍼티를 가지고 있다.

 

 

EdgeInsets.all(n) // 전 방향으로 n만큼 여백 설정
EdgeInsets.fromLTRB(left, top, right, bottom) // 좌, 상, 우, 하 방향으로 여백을 설정
EdgeInsets.only(left: ) // 한 방향에 대해서만 여백 설정
EdgeInsets.symmetric(vertical: , horizontal: ) // 가로, 세로 방향에 대한 여백 설정

 

padding프로퍼티에는 이러한 종류들이 있다.

 

 

Container 위젯의 색상과 크기도 설정할 수 있는 프로퍼티도 존재한다.

 

 

body: Center(
	child: Text('Hello'),
)

 

Container와 유사한 Center위젯은 child를 기기 정중앙에 배치시킨다.

 

 

이미지 넣기

 

빨간 네모 안 영역 클릭 > 폴더 추가 버튼 클릭 > images폴더 만들고 그 안에 사진 넣기

 

 

pubspec.yaml의 이미지 등록 부분에서 주석 제거 후 위 내용 넣기

 

 

Image.asset('이미지 경로')로 이미지 삽입

Container와 마찬가지로 크기 조절이 가능하다,

이미지의 크기는 변하지만, 이미지의 가로세로 비율은 변하지 않는다.

 

 

Text 위젯

 

body: Center(
        child:
            Text('Hello', style: TextStyle(fontSize: 30, color: Colors.blue)),
),

 

Text 위젯은 TextStyle 위젯을 통해 문자열을 꾸밀 수 있다.

 

 

결과화면

 

 

폰트 적용하기

 

Browse Fonts - Google Fonts

여기 들어가서 원하는 폰트 다운

 

 

이미지 삽입하는 것과 비슷하다.

fonts폴더를 만들어 다운받은 폰트를 넣고 

pubspec.yaml에서 저런식으로 추가해 주면 된다.

 

 

fontFamily와 fontWeigth 프로퍼티로 폰트를 적용할 수 있다.

폰트가 적용이 안된다면 Hot-Reload를 누르면 된다.

 

 

전체 글꼴을 적용하려면 테마에다 글꼴을 추가하면 된다.

 

 

Column

 

Column은 위에서 아래로 위젯들을 배치하는 방법이다.

Column은 여러 위젯들을 감싸기 때문에 children이라는 배열을 사용한다.

 

 

정렬

 

body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [],
)

 

세로축 정렬은 mainAxisAlignment, 가로축 정렬은 main crossAxisAlignment로 할 수 있다.

 

 

앞의 코드에서 한 세로축 가운데 정렬이 적용된 모습

 

 

body: Center(
	Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [],
    )      
)

 

화면 정중앙에 위젯들을 배치 하고 싶으면 Column을 Center로 감싸면 된다.

vscode에선 "cmd + ." 을 눌러서 코드를 감쌀 수 있다.

Column위에 커서를 두고 단축키를 눌러 Wrap with Center를 선택해 주면 된다.

 

 

 

Row는 Column과 반대로 위젯들을 가로로 배치한다.

 

 

MainAxisAlignment.start // 좌측정렬
MainAxisAlignment.end // 우측정렬
MainAxisAlignment.center // 중앙정렬

// 위젯을 시작점과 끝점에 배치시킨다.
MainAxisAlignment.spaceBetween 

// 양옆 공백과 위젯 사아사이 공백 크기를 모두 동일하게 배치한다.
MainAxisAlignment.spaceEvenly

 

위젯 정렬 방법들

 

 

스크롤 뷰 만들기

 

class MyHomePage extends StatelessWidget {
  final String title;
  List<Widget> myChildren = [];
  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    for (var i = 0; i < 50; i++) {
      myChildren.add(Text(
        '$i ' + 'Hello, World!',
        style: TextStyle(fontSize: 25),
      ));
    }
    return Scaffold(
        appBar: AppBar(
            title: Text(
          this.title,
        )),
        body: Center(
            child: ListView(
          children: myChildren,
        )));
  }
}

 

스크롤 뷰는 ListView라는 위젯을 통해 구현할 수 있다.

myChlildren이라는 배열을 하나 선언하고 "Hello, World"란 문자열을 배열에 50번 추가한다.

그 후 ListView로 배열의 내용을 세로로 출력한다.

 

ListView안에 scrollDirection: Axis.horizontal을 추가하면 가로로 출력이 된다.

 

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text(
          this.title,
        )),
        body: Center(
            child: ListView.builder(
          itemCount: 50,
          itemBuilder: (BuildContext context, int index) {
            return Text('$index ' + 'Text', style: TextStyle(fontSize: 25));
          },
        )));
  }

 

for문 대신 builder라는 함수로도 구현할 수 있다.

 

 

실행결과

마우스를 아래쪽을 드래그하면 스크롤이 가능하다.

 

 

Stack

 

body: Center(
          child: Stack(
            children: [
              Image.asset('images/flutter_logo.png'),
              Positioned(
                  left: 0,
                  bottom: 0,
                  child: Image.asset(
                    'images/dart_logo.png',
                    height: 100,
                    width: 100,
                  )),
            ],
          ),
        )

 

Stack을 이용해 위젯 위에 위젯을 쌓을 수 있다.

Image는 Image.network('이미지 주소')로도 삽입이 가능한데 

Stack에선 기본적으로 Image.network()가 상단에 배치가 된다.

 

이미지를 감싸는 Positioned위젯을 통해 이미지의 위치 조정이 가능하다. 

 

dart_logo를 좌하단에 배치했다.

 

 

Button

 

 

body: Center(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.center, 
          children: [
            TextButton(onPressed: () {}, child: Text('Text Btn')),
            Padding(padding: EdgeInsets.all(20)),
            ElevatedButton(onPressed: () {}, child: Text('Elevated Btn')),
            Padding(padding: EdgeInsets.all(20)),
            OutlinedButton(onPressed: () {}, child: Text('Outlined Btn')),
            Padding(padding: EdgeInsets.all(20)),
            IconButton(onPressed: () {}, icon: Icon(Icons.star)),
            Padding(padding: EdgeInsets.all(20)),
          ]),
)

 

 

버튼은 TextButton, ElevatedButton, OutlinedButton, IconButton이 있으며,

공통적으로 onPressed라는 프로퍼티를 가지고 있다.

여기엔 함수가 인자로 들어가며 버튼이 눌렸을 때 어떤 일을 수행할지 정의하면 된다.

 

 

1. TextButton: 안에 Text 위젯만 있는 가장 간단한 형태의 버튼
2. ElevatedButton: 배경색이 칠해진 버튼
3. OutlinedButton: 테두리가 그려진 버튼
4. IconButton: Icon()을 인자로 받는 아이콘 형태의 버튼

 

 

커스텀 위젯들 사용

 

기본적인 위젯을 알아봤고, 그 외에도 정말 많은 위젯이 있다.

 

Dart packages

위젯은 패키지 형태로 만들어 배포되며, 배포한 패키지는 위 페이지에 공유된다.

 

 

Flutter

플러터 공식 유튜브 채널도 참고하면 좋다.