Flutter 반복문(ListView.builder)

바다구름·2023년 2월 28일
0

Flutter

목록 보기
6/19
post-thumbnail

예시코드

import 'package:flutter/material.dart';

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

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

  
  Widget build(BuildContext context) {
    return MaterialApp(
      //Image.asset('assets/dog.png')
      home: Scaffold(
        floatingActionButton: FloatingActionButton( // 우측하단에 나오는 버튼
          child: Text('버튼'),
          onPressed: (){
            // 클릭시 입력할 내용
          },
        ),
          appBar: AppBar(),
          body: ListView.builder(
            itemCount: 3, // 몇 번 반복할 것인지
            // c는 현재 빌드되고 있는 위젯에 대한 BuildContext입니다. 
            // BuildContext는 위젯 트리에서 현재 위젯의 위치 및 상태를 나타냅니다.
            itemBuilder: (c, i){ // i는 0부터 차례대로 커지는 숫자
              print(i);
              
              return ListTile(
                leading: Icon(Icons.star),
                title: Text(i.toString()),
              );
            }

          ),
          bottomNavigationBar: Bottom(),
      ),
    );
  }
}


class Bottom extends StatelessWidget {
  const Bottom({Key? key}) : super(key: key);
  
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: SizedBox(
        height: 50,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(Icons.home_outlined),
            Icon(Icons.home_outlined),
            Icon(Icons.home_outlined),
          ],
        ),
      ),
    );



  }
}

결과

1. ListView.builder : 스크롤바 생성 확인

2. floatingActionButton : 버튼 생성 확인


profile
안녕하세요.

0개의 댓글