[Flutter] pageview 사용하기

 

PageView class - widgets library - Dart API

 

PageView란 페이지별로 스크롤이 가능한 위젯이다.

 

지난번에 만들어 둔 ListView에 PageView를 추가해보도록 하자.

 

먼저 결과물은 아래와 같다. PageView가 앱바 아래에 위치하고 해당 PageView는 horizontal로 스크롤이 가능하며 스크롤 시 이미지가 변경되는 것을 확인할 수 있다.

 

 

지난번에 리스트를 만든 걸 활용하였는데 StatelessWidget으로 홈화면을 만들어 주고 그 안에 PageView와 ListView를 넣어주었다.

 

home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<String> mainList = [
      'Cold',
      'Poll',
      'Beam',
      'Greek',
      'Song',
      'Tight',
      'Run',
      'Count'
    ];

    final PageController pageController = PageController(initialPage: 0);

    return Scaffold(
        appBar: AppBar(
          title: Text('TEST'),
        ),
        body: Column(
          children: [
            Container(
              height: 100,
              child: PageView(
                  scrollDirection: Axis.horizontal,
                  controller: pageController,
                  children: [
                    Image.asset('assets/images/a.jpg'),
                    Image.asset('assets/images/b.jpg'),
                    Image.asset('assets/images/c.jpg'),
                  ],
                ),
              ),
            Expanded(
              child: ListView.separated(
                itemCount: mainList.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    onTap: () {},
                    title: Container(
                      alignment: Alignment.centerLeft,
                      height: 50,
                      child: Text(
                        mainList[index],
                        textAlign: TextAlign.start,
                      ),
                    ),
                  );
                }, separatorBuilder: (BuildContext context, int index) { return Divider(thickness: 1); },),
            )
          ],
        )
    );
  }
}

 

main.dart

import 'package:flutter/material.dart';
import 'package:test_20210719/home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

 

중간에 Expanded를 넣은 이유는 처음엔 Expanded 대신 상위에 Column만 사용하려고 하였으나 리스트가 나오지 않는 오류가 발생했고 해당 오류는 RenderBox was not laid out 이라는 오류로 리스트뷰 열 내부에 배치가 되어서 발생하는 오류라고 한다. 그래서 Expanded를 사용을 추천한다.

 

앱바 아래에 배너처럼 사용하기 위해서 Container로 감싼 후 height 값을 따로 주었다.

그리고 PageView를 이용해 스크롤 방향과 controller를 세팅해 주었다.