Flutter2

1 minute read

FLUTTER 공부 2일차

1. 무한 리스트뷰 생성

이번에는 플루터에서 위젯을 생성해보도록 하자. 오늘 만들어볼 위젯은 리스트뷰이다. 랜덤 단어가 들어간 리스트가 무한으로 생성되는 리스트뷰이다. 플루터에서 모든 것들은 위젯으로 구성되어 있다는 사실을 기억하자.

import 설정

우선 필요한 것들을 모두 import 해준다. asPascalCase을 사용할 것이기 때문에 english_words 또한 import해준다. 이와 관련된 내용은 전 시간에 다뤘다.

class MyApp 설정

StatelessWidget을 확장 받는 class MyApp에서 title을 정해주고 home에는 RandomWords을 불러온다.

Note:

Stateful widget 위젯들은 메모리에 살아있는 동안은 그 상태가 유지된다. 이를 구현하기 위해서는 최소 두개의 클래스가 필요하다.

Stateful 위젯 자체는 immutable (속성 변경이 불가능) 하지만 객체가 생성되는 시점에서 State Class를 생성하고 위젯이 메모리에 상주해 있는 동안 그 속성 값을 변경할 수 있다.

우리는 RandomWords라는 Stateful Widget을 사용하고 있다. RandomWords는 자체적으로 RandomWordsState 클래스를 가지고 있다. 아래에서 확인할 수 있듯이 State 클래스에서 RandomWords의 상태를 관리한다.

리스트뷰 위젯 구성

문자열을 담을 리스트와 폰트 스타일을 정의해준다. 식별자 앞에 _를 사용하는 것은 private 설정을 의미한다. 이 클래스 안에 Widget에서는 ListView 를 생성해준다. padding은 Edgeinsets을 사용해서 모든 면에서 일반적인 16픽셀 여백을 가지도록 한다.

홀수행일 경우에는 구분자를 리턴해주어서 —— 이 모양으로 구분이 가능하도록 해준다. 짝수 행일 경우에는 랜덤한 문자열을 넣어주도록 한다. 가지고 있는 문자열을 모두 소진하면 10개를 더 가져오도록 한다. 그리고 문자열에 index 행을 리턴해주도록 한다.

위의 클래스 안에 두 위젯이다. buildRow는 문자열을 표현할 행을 정의해준다. 폰트 스타일을 지정해주고 asPascalCase를 사용해준다. 아래 위젯 빌드에서는 AppBar를 만들어서 타이틀을 정해주고 body에는 _buildSuggestions()을 불러온다.

전체 코드

이제 custom ListView를 만들어보자!

2. Custom 리스트뷰 생성

위에서 아주 기본 형태인 무한으로 생성되는 리스트뷰를 만들어보았으니 이번에는 개인 custom화 된 리스트뷰를 만들어보자.

import 설정

아까와 다르게 english_words는 사용하지 않기 때문에 삭제해두었다.

MyApp Class 설정

Stateless Widget을 확장받는 class MyApp이다. 여기서는 Scaffold 위젯을 리턴하는데 저번 시간에 배웠듯이 Scaffold는 appBar, body property, title을 지원해준다. 그에 맞도록 타이틀의 이름을 지어주고 body는 ListView를 적용해준다. ListTile이란 안드로이드로 생각하자면 카드뷰와 비슷한 느낌이라고 생각하면 되겠다. ListTile과 비슷한 Card 기능도 있더라.

아무튼 ListTile을 세 개 써주어서 카드를 3개 만들고 그 안에 icon을 넣고 타이틀을 지정해준다. onTap되면, 즉 눌러지면 Dialog를 보여주도록 showDialog()를 호출한다. context와 ““안에 String을 같이 넘겨주도록 한다.