Flutter 기초(4) - 첫 번째 앱 작성하기( Stateful과 Stateless의 차이, 무한 ListView 생성 )

Flutter 공식 홈페이지의 첫 번째 앱 작성하기 코드

위는 Flutter 공식 홈페이지에 나와있는 첫 번째 앱 작성하기 코드입니다.

 

먼저 MyApp은 StatelessWidget을 상속받습니다.

 

Stateless 위젯은 속성을 변경할 수 없습니다. 모든 값을 final로 선언해줍니다.

이와 반대로 조금 이따 사용할 변경 가능한 Stateful 위젯도 있습니다.

 

MaterialApp이라는 위젯을 빌드하게 되는데, 이 위젯을 Scaffold 위젯으로 구성했습니다.

Material 라이브러리 문서를 보면 Scaffold를 사용하면 app bar와 title, body 등 기본적인 Material 디자인의 레이아웃 구조를 구현할 수 있습니다.

app bar와 body에 간단한 Text 위젯을 넣어 만든 결과는 다음 화면처럼 나옵니다.

 

앱의 위쪽에 있는 하늘색으로 된 칸을 보면 Welcome to Flutter라고 적혀있습니다.

하늘색으로 된 부분이 app bar 영역임을 알 수 있습니다.

또한 앱의 한가운데에 Hello World가 적혀있는 것으로 보아 하얀 부분이 body 영역임을 알 수 있습니다.

Center 위젯을 사용했기 때문에 Hello World 텍스트 위젯이 한가운데에 있게 됩니다.

 

이제 외부 패키지를 이용하여 앱을 조금 더 쓸모있게 만들어보겠습니다.

먼저 pubspec.yaml 파일에 dependencies 아래에 빨간 밑줄이 쳐진 것처럼 english_words: ^3.1.5라고 적어줍니다.

그리고 terminal을 실행합니다. 단축키 기본 설정은 [Ctrl] + [`]입니다.

다음과 같이 flutter pub get 명령어를 실행하여 해당 패키지를 프로젝트로 가져옵니다. 이제 다시 main.dart 파일을 실행합니다. 그리고 다음과 같이 적어줍니다.

두 번째 줄에서 프로젝트로 가져왔던 english_words 패키지를 import 시킵니다. 그리고 Hello World 대신에 english_words 패키지에 있는 WordPair.random() 함수를 통해 랜덤 단어 한 쌍을 보여주도록 합니다.

위와 같이 랜덤으로 생성된 단어 한 쌍을 화면에 띄우게 됩니다. VSCode에서 저장을 다시 누르면 새로운 단어들로 대체됩니다. 앱을 Stateful 위젯으로 변경하여 단어들이 계속해서 생성될 수 있도록 만들어보겠습니다.

 

Stateful 한 위젯을 만들기 위해서는 최소 두 개 이상의 클래스가 필요합니다.

1. StatefulWidget 클래스 
2. State 클래스

제가 이해하기로는 StatefulWidget은 그릇이 되고, State 클래스는 안에 담기는 내용물이 되는 것 같습니다.

StatefulWidget 클래스 자체가 변경이 되는 것이 아니라 StatefulWidget은 바뀔 내용이 담길 공간을 제공하는 것 같습니다.

State 클래스는 인스턴스를 생성하여 StatefulWidget에 내용을 담아준다고 생각하면 될 것 같습니다.

그럼 실제로 만들어보도록 하겠습니다.

코드를 살펴보면 기존에 존재하던 StatelessWidget 부분은 여전히 존재합니다. 그 이유는 Scaffold를 사용하여 앱의 Material 디자인을 꾸미는 것은 유지하기 위해서입니다. 대신 body에 있던 Text 위젯은 내용이 변경 불가능하기 때문에, 저희가 원하는 Stateful 하게 앱을 만들기 위해서 StatefulWidget 클래스인 RandomWords를 넣어줍니다.

 

RandomWordsState 클래스를 보면 RandomWords로 지정된 제네릭으로 State 클래스를 상속합니다. 이는 RandomWords 위젯을 위해 상태를 보관할 수 있게 만들어줍니다. 

 

Stateful 위젯에서는 먼저 선언했던 State 클래스를 만드는 것 이외에는 작업을 수행하지 않습니다. 그러면 build 메서드가 없기 때문에 에러가 발생합니다. 이제 State 클래스에 build 메서드를 작성합니다. 기존에 단어 쌍을 만들어주던 기능을 수행하게 됩니다.

 

이렇게 마무리하면 미리 만들었던 Stateless 앱과 다른 것이 없습니다. 이제는 무한 스크롤 ListView를 생성해보도록 하겠습니다.

 

State 클래스에 단어쌍 목록을 저장할 suggestions와 글씨를 키워줄 때 필요한 biggerFont 변수를 추가해줍니다.

변수 앞에 _를 붙이게 되면 private 적용이 됩니다.

 

그다음은 실제로 스타트업 추천 이름이 뜨는 ListView 부분을 작성하겠습니다. Lazy Loading을 적용하기 위해서 코드가 살짝 복잡할 수 있습니다. Lazy Loading에 대해서는 여기를 참조해주세요. 먼저 실제로 ListView가 만들도록 하겠습니다.

ListView의 itemBuilder 속성은 익명 함수 형태의 콜백 함수를 받습니다.

itemBuilder에 대한 설명을 살펴보면

This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

실제로 표시되는 하위 항목에 대해서만 호출된다고 합니다. 스크롤을 아래로 내리면 itemBuilder에 있는 익명 함수가 실행되는 것으로 보입니다. 실제로 콜백 함수에 print("test")라는 코드를 넣었을 때, 새로 생성되는 List 항목을 그릴 때 출력되는 것을 볼 수 있었습니다. item의 개수가 짝수( item count가 0부터 시작하기 때문)이면 구분선을 그어주는 Divider() 함수를 실행합니다. 그리고 구분선도 item으로 측정하기 때문에 두 개가 생성될 때마다 _suggestions에 있는 단어 쌍을 출력하도록 합니다. buildRow라는 함수를 호출하여 아이템을 그려주도록 합니다. 

_buildRow 함수에서는 ListTile을 return 해주면서 이전에 쓰였던 단어쌍을 Text 위젯에 담아줍니다.

마지막으로 body 부분에 _buildSuggestion 함수를 넣어주어 지금까지 작성했던 Lazy Loading이 되는 무한 단어쌍 리스트뷰를 출력하도록 합니다.

전체 코드는 여기에 있습니다.

 

다음번에는 추천 단어 쌍 중 좋아하는 단어를 보관할 수 있도록 만들어보겠습니다.