Flutter Cookbook (Lists, Images)
Updated:
1.Lists
Create a grid list
-
items 를 표시할때 GridView widget 을 통해 쉽게 grid view 나타낼 수 있습니다.
GridView.count()constructor rows 또는 columns 를 만들수 있습니다 -
예시로, GridView 를 통해 100 개의 list 를 생성합니다
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const title = 'Grid List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
body: GridView.count(
// grid 2 columns 생성
crossAxisCount: 2,
// 100 개의 list 생성
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline5,
),
);
}),
),
),
);
}
}
Create lists with different types of items
- 통일된 lists 가 아닌 다른 타입, 스타일로 list 를 만드는 방법입니다.
import 'package:flutter/material.dart';
void main() {
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
//
final List<ListItem> items = List<ListItem>.generate(
1000,
(i) => i % 6 == 0
? HeadingItem('Heading $i')
: MessageItem('Sender $i', 'Message body $i'),
);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Mixed List'),
),
body: ListView.builder(
// items 의 길이 만큼 itemCount
itemCount: items.length,
// itemBuilder : 각 item 을 위젯 베이스 타입으로 만듬
itemBuilder: (context, index) {
final item = items[index];
// ListTile return
return ListTile(
title: item.buildTitle(context),
subtitle: item.buildSubtitle(context),
);
},
),
),
);
}
}
// ListItem 추상 클래스
abstract class ListItem {
// title 라인 리스트 아이템을 나타내는 부분
Widget buildTitle(BuildContext context);
// subtiltle 라인, 리스트 아이템을 나타내는 부분
Widget buildSubtitle(BuildContext context);
}
// heading 부분의 contains 디스플레이 부분에 나타내는 부분
class HeadingItem implements ListItem {
final String heading;
// constructor 생성
HeadingItem(this.heading);
@override
Widget buildTitle(BuildContext context) {
return Text(
heading,
style: Theme.of(context).textTheme.headline5,
);
}
@override
Widget buildSubtitle(BuildContext context) => const SizedBox.shrink();
}
// MessageItem 이 ListItem 에 나타 내는 부분
class MessageItem implements ListItem {
final String sender;
final String body;
MessageItem(this.sender, this.body);
@override
Widget buildTitle(BuildContext context) => Text(sender);
@override
Widget buildSubtitle(BuildContext context) => Text(body);
}
Place a floating app bar above a list
- floating appBar 가 리스트 scroll down 할때 사라지게 하는 기능을 구현할 수 있습니다.
Check point!
-
CustomScrollView 생성
-
SilverAppBar 를 사용해서 floating app bar 에 추가하기
-
SilverList 사용해서 list items 를 추가하기
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const title = 'Floating App Bar';
return MaterialApp(
title: title,
debugShowCheckedModeBanner: false,
home: Scaffold(
// Floating AppBar 는 AppBar 에 추가해서 사용하는것이 아니라 body 부분에 CustomScrollView 안에 추가해서 사용함
body: CustomScrollView(
// silvers viewport 위치
slivers: [
// CustomScrollView 안에 appBar 를 사용하기 위해 SilverAppBar 호출
const SliverAppBar(
// SliverAppBar 의 title
title: Text(title),
// floating action true : 유저가 스크롤 시작할때 floating 기능이 시작될 수 있게 설정
floating: true,
// Placeholder widget 을 호출해서 육안으로 줄어드는 크기를 조절합니다
flexibleSpace: Placeholder(),
// 초기 appBar 의 크기를 설정함
expandedHeight: 200,
),
// appBar 밑의 body 부분의 list 를 SilverList 로 생성
SliverList(
// delegate : SliverChildBuilderDelegate 호출해서 각 item 들이 스크롤 할때 나타날 수 있게 함
delegate: SliverChildBuilderDelegate(
// return ListTile 이 각각 의 title 이고 index 의 item dp 각각 붙게 사용
(context, index) => ListTile(title: Text('Item #$index')),
// 100 개의 list item 사용
childCount: 100,
),
),
],
),
),
);
}
}
Work with long lists
ListView constructor 를 사용해서 small lists 에게는 표준이지만, items 가 크게 되면 ListView.builder constructor 를 사용합니다.
Check Point!
-
data source 를 생성
-
data source 를 widgets 로 변환
import 'package:flutter/material.dart';
void main() {
runApp(
const MyApp(),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const title = 'Long List';
// 10000 개의 items list 를 생성해서 만듬
final items = List<String>.generate(10000, (i) => 'Item $i');
return MaterialApp(
title: title,
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
// ListView.builder 위젯 생성
body: ListView.builder(
// 길이는 items 의 길이 만큼 count
itemCount: items.length,
// itemBuilder 를 사용해서 ListTile 생성
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
),
);
}
}
Use list with Icons
ListView 을 사용해서 위젯의 leading 부분에 Icon을 배치해서 list 를 사용해서 list 를 만듬니다
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const title = 'Basic List';
return MaterialApp(
debugShowCheckedModeBanner: false,
title: title,
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
// ListView 위젯 생성
body: ListView(
children: const <Widget>[
// ListTile 마다 leading 에 Icon 나타 내기
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
),
),
);
}
}
Create a horizontal list
옆으로 horizontal scroll 하는 기능 구현입니다
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const title = 'Horizontal List';
return MaterialApp(
debugShowCheckedModeBanner: false,
title: title,
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
// Container 생성
body: Container(
margin: const EdgeInsets.symmetric(vertical: 100.0),
height: 200.0,
// ListView 생성해서 children 을 각 Container 로 받음
child: ListView(
// scroll 방향을 horizontal 방향으로 되게 함
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
Container(
width: 160.0,
color: Colors.green,
),
Container(
width: 160.0,
color: Colors.yellow,
),
Container(
width: 160.0,
color: Colors.orange,
),
],
),
),
),
);
}
}
Implement swipe to dismiss
“swipe to dismiss” 는 mobile app 에서 흔희 있는 기능으로서 리스트의 item 을 삭제하고자 하면 옆으로 swipe 하면 list item 이 삭제 되는 기능을 가리 킵니다. flutter 에서는 Dismissible Widget 을 사용해서 기능을 구현합니다
Check point!
-
list items 생성
-
각 items 를 Dismissible widget 으로 wrap 함
-
leave behind check 되는 스낵바 생성
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
// 아이템이 삭제되고 변형되는게 업데이트되야 되기때문에 Stateful widget 생성
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
MyAppState createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
// 리스트 items 20 개 생성
final items = List<String>.generate(20, (i) => 'Item ${i + 1}');
@override
Widget build(BuildContext context) {
const title = 'Dismissing Items';
return MaterialApp(
debugShowCheckedModeBanner: false,
title: title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
// ListView builder 생성
body: ListView.builder(
// list 의 길이는 items 의 길이 만큼
itemCount: items.length,
// itemBuilder 생성
itemBuilder: (context, index) {
// item 들의 key 값을 생성하기 위한 각 items 의 index 값을 item 으로 변수 선언
final item = items[index];
// return 값으로 Dismissible widget 생성
return Dismissible(
// Dismissible 의 반드시 key 값을 가지고 있어야 하는데 각 widget 들의 고유값으로 key 값을 가지고 있어야 한다
key: Key(item),
// swap 하면 list 삭제 기능
onDismissed: (startToEnd) {
// setState 로 실제 기능이 삭제 되게 함
setState(() {
items.removeAt(index);
});
// Then show a snackbar.
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('$item dismissed')));
},
// dismiss 부분 디자인 (icon, text)
background: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(20),
child: Row(
children: const <Widget>[
Icon(
Icons.delete,
color: Colors.white,
),
SizedBox(width: 30),
Text(
'Delete item',
style: TextStyle(color: Colors.white),
),
],
),
),
),
// ListTile 호출
child: ListTile(
title: Text(item),
),
);
},
),
),
);
}
}
🔶 🔷 📌 🔑
Reference
Flutter cookbook - https://flutter.dev/docs/cookbook
Leave a comment