꿈꾸는 시스템 디자이너

Flutter Example - ListView | Horizontal ListView 본문

Tutorial/Flutter with App

Flutter Example - ListView | Horizontal ListView

독행소년 2019. 9. 27. 14:36
import 'package:flutter/material.dart';

class ListViewHorizontal extends StatelessWidget {
  List<Container> items;

  ListViewHorizontal() {
    items = List<Container>.generate(100, (index) {
      return boxItem(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ListView - Horizontal")),
      body: Container(
        height: 100,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: items.length,
          itemBuilder: (context, index) {
            return items[index];
          },
        ),
      ),
    );
  }

  boxItem(int index) {
    return Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
          color: (index % 3 == 0)
              ? Colors.red
              : (index % 3 == 1) ? Colors.blue : Colors.orange),
      alignment: Alignment(0, 0),
      child: Text(
        "Item $index",
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

 

 

▶ Go to Table of Contents | 강의 목차로 이동


※ This example is also available in the Flutter Code Examples app. | 본 예제는 Flutter Code Examples 앱에서도 제공됩니다.

 

Flutter Code Examples - Google Play 앱

Are you a beginner at Flutter? Check out the various features of Flutter through the demo. Source code for all demos is also provided.

play.google.com

Comments