Flutter로 무한 스크롤 List View 만들기

ListView 만들기

본 글에서는 외부 라이브러리 english_words를 사용합니다. (아래 참고)

 

2019/12/08 - [Mobile/Flutter] - 플루터(flutter) 외부 패키지 가져오기

플루터(flutter) 외부 패키지 가져오기

 

변수 정의

class RandomWordsState extends State<RandomWords> {
  // 식별자 앞에 _ 를 붙이면 private이 된다.
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  
  ...
}

문자열을 담을 리스트와 폰트 스타일을 정의합니다.

다트(dart)에서는 식별자 앞에 _를 사용하면 private으로 적용됩니다.

 

Row 정의

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

문자열을 표현할 행(row)을 정의합니다.

 

문자열은 랜덤한 문자열로 pascalCase로 표현합니다.

폰트의 크기는 위에서 정의한 18크기로 표현합니다.

 

리스트 화면에 보여주기

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {

          // 홀수 행은 구분자를 넣어준다.
          if (i.isOdd) return Divider();

          // 짝수 행은 랜덤한 문자열을 넣어준다.
          final index = i ~/ 2; // i를 2로 나누었을때, 결과의 정수부분을 반환한다.
          if (index >= _suggestions.length) {
            // 가지고 있는 문자열을 모두 소진하면, 10개를 더 불러온다.
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

홀수 행은 리스트를 구분하기 위해 구분자를 넣습니다. (Divider 이용)

 

짝수행의 경우, 문자열 행을 찍어주는데 만약 가지고 있는 문자열 리스트를 모두 소진하면, 10개를 더 생성합니다.

• gernerateWordPairs().take(10);

 

위젯 빌드

마지막으로 Scaffold를 이용하여 meterial 디자인 시각레이아웃을 구현해줍니다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('무한 리스트'),
      ),
      body: _buildSuggestions(),
    );
  }

 

전체 코드

완성된 전체 코드는 아래에 있습니다.

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

class RandomWordsState extends State<RandomWords> {
  // 식별자 앞에 _ 를 붙이면 private이 된다.
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {

          // 홀수 행은 구분자를 넣어준다.
          if (i.isOdd) return Divider();

          // 짝수 행은 랜덤한 문자열을 넣어준다.
          final index = i ~/ 2; // i를 2로 나누었을때, 결과의 정수부분을 반환한다.
          if (index >= _suggestions.length) {
            // 가지고 있는 문자열을 모두 소진하면, 10개를 더 불러온다.
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('무한 리스트'),
      ),
      body: _buildSuggestions(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

 

무한 리스트 뷰

스크롤을 내려도 계속해서 문자열 리스트를 생성하여 화면에 뿌려준다.

Reference

https://flutter-ko.dev/docs/get-started/codelab

첫 Flutter 앱 작성하기 - 1부

다른 Flutter 글 보기

2019/12/08 - [Mobile/Flutter] - Flutter (플루터) Window 환경에 설치하기

Flutter (플루터) Window 환경에 설치하기

2019/12/08 - [Mobile/Flutter] - 플루터(Flutter) App 생성 및 실행

Flutter App 생성 및 실행