꿈꾸는 시스템 디자이너

import 'package:flutter/material.dart'; ListViewHandelItemState pageState; class ListViewHandelItem extends StatefulWidget { @override ListViewHandelItemState createState() { pageState = ListViewHandelItemState(); return pageState; } } class ListViewHandelItemState extends State { List items = List.generate(7, (index) { return "Item - $index"; }); final teController = TextEditingController( text..

import 'package:flutter/material.dart'; class ListViewHorizontal extends StatelessWidget { List items; ListViewHorizontal() { items = List.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,..

import 'package:flutter/material.dart'; abstract class ListsItem {} class HeadingItem implements ListsItem { final String heading; HeadingItem(this.heading); } class MessageItem implements ListsItem { final String sender; final String body; MessageItem(this.sender, this.body); } class ListViewWithDiffTypeItems extends StatelessWidget { List items; ListViewWithDiffTypeItems() { items = List.gener..

import 'package:flutter/material.dart'; class ListViewWidthBuilder extends StatelessWidget { List items; ListViewWidthBuilder() { items = List.generate(100, (index) { return "Item - $index"; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("ListView with builder")), body: ListView.builder(itemBuilder: (context,index){ String item = items[index]; re..

import 'package:flutter/material.dart'; class ListViewBasic extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("ListView Demo - Basic")), body: ListView( children: [ Text("First Item - Text"), Container( decoration: BoxDecoration(color: Colors.orange), child: Text("Second item - Text in Container"), ), ListTile( leading: Icon(Icon..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이전 강좌에서 살펴본 ListView들은 모두 동일한 타입의 아이템들로 ListView를 구성하여 사용했다. 하지만 필요에 따라 타입이 다른 아이템들로 ListView를 꾸며야 할 경우도 있다. 다음과 같은 앱이 그 예가 될 수 있다. 리스트 아이템 중 굵은 텍스트로 구성되는 아이템이 있는가하면, 중간 크기와 작은 크기의 텍스트 두 줄로 구성된 아이템도 있다. 화면상으로는 2종의 서로 다른 타입의 아이템들이 하나의 ListView에 등록되어 사용되고 있다. 우선 ListView를 구성하는 아이템들과 관련된 코드부터 살펴보자 // ListView의 아이템으로 이용할 추상 클래스 abstract class ListItem..

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 기본적인 ListView 사용법에 대해서 알아봤다. 대부분의 리스트뷰는 수직적으로 구성하여 상하 스크롤되는 형태로 사용된다. 하지만 간혹 수평적으로 즉 좌우로 스크롤되는 리스트뷰가 필요할 때도 있다. 이 경우에는 ListView의 scrollDirection 항목의 설정을 통해 스크롤 방향을 변경할 수 있다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext contex..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 ListView를 사용하는 방법에 대해서 알아본다. Flutter에서의 ListView는 ListTile들로 구성된다. 소스코드는 다음과 같다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Basic List'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar(title: Te..