[Flutter]08 ListView.builder, 버튼기능

ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의

---

ListTile 기본 위젯 :

왼쪽에 그림, 오른쪽에 글 있는 레이아웃 리스트 형태로 쉽게 만들 수 있음.

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) {
    return MaterialApp(
        home : Scaffold(
            appBar: AppBar(),
            bottomNavigationBar: BottomAppBar(),
            body: ListView(
              children: [
                ListTile(
                    leading: Image.asset('flower.jpg'),
                    title : Text('서다원')
                ),
                ListTile(
                    leading: Image.asset('flower.jpg'),
                    title : Text('서다원')
                ),
                ListTile(
                    leading: Image.asset('flower.jpg'),
                    title : Text('서다원')
                ),
              ],
            )
        )
    );

  }
}

 

---

목록이 너무 많다면?

1. 반복문 써보기

2. 자동으로 반복해주는 ListView.builder()

body: ListView.builder(
    itemCount: 3,
    itemBuilder: (c, i){
      return Text('안녕');
    },
)

2개의 파라미터가 들어가야하는데

itemCount 에는 몇번 반복할 건지를 적어주고 

itemBuilder 에는 함수를 적어주면 됨.

 

i 는 여기서 1씩 증가하는 변수가 되는데 i 를 출력해보자

대신 Text 안에는 문자만 들어갈 수 있어서 i 뒤에 .toString() 으로 바꿔주는 과정이 필요하다

body: ListView.builder(
    itemCount: 3,
    itemBuilder: (c, i){
      return Text(i.toString());
    },
)

 

아까 배웠던 ListTile 을 ListView.builder() 에 응용해보았다.

body: ListView.builder(
    itemCount: 5,
    itemBuilder: (c, i){
      return ListTile(
        leading: Image.asset('flower.jpg'),
        title: Text('서다원'),
      );
    },
)

---

변수를 출력해보고 싶으면

print( ) 써서 콘솔창에서 확인하기

---

버튼에 기능 부여하는 법

 

Scaffold 안에 floatingActionButton 을 넣는다

버튼이니까 안에 child 랑 onPressed () {} 있어야한다.

 

import 'package:flutter/material.dart';

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


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

  var a = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home : Scaffold(
          floatingActionButton: FloatingActionButton(
            child: Text('버튼'),
            onPressed: (){
              print(a);
              a ++ ;
            },
          ),
            appBar: AppBar(),
            bottomNavigationBar: BottomAppBar(),
            body: ListView.builder(
                itemCount: 5,
                itemBuilder: (c, i){
                  print(i);
                  return ListTile(
                    leading: Image.asset('flower.jpg'),
                    title: Text('서다원'),
                  );
                },
            )
            )
        );

  }
}

버튼이라는 문자 대신에 콘솔창에 나타나도록 한 a 가 뜨게 하고싶다면

위젯의 재렌더링 과정이 필요하다.