Stateful Widget && ListView && ListView.builder && Floating action

Flutter 에서 자주 값이 변화해야 하는 것이 있으면 변동 사항을 재 랜더링 해야함.

• State를 사용하면 된다.
• State 는 변화할 때마다 widget이 재 랜더링 되는 형태.

위젯 생성시 기본적으로 Stateless 상속하여 위젯 생성.

• Stateful 로 상속할 시 class 안의 변수는 State 가 된다
• State는 setState 함수를 통해서만 값 변경가능

flutter 는 변수를 2가지로 사용할 수 있음

• 그냥변수, State 변수
  - 기본적으로 형태는 다른 게 없음

• State 변수 사용하려면 statefulWidget 클래스 상속 필요
• State 변수 사용시 화면이 자동으로 재 랜더링 됨
• State 변수 변경시 setState 함수 사용해서 변경해야 함

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  var a = 0;
  var name =['주원웅','홍길동','치킨집'];
  var f = [0,0,0];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text(a.toString()),
          onPressed: (){
            setState(() {
              a++;
            });
          }
        ),
        appBar: AppBar(
          title: Text('앱'),
        ),
        body: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, index){
            return ListTile(
              leading: Text(f[index].toString()),
              title: Text(name[index]),
              trailing: IconButton(icon: Icon(Icons.favorite),
                onPressed: (){setState(() {
                  f[index]++;
                });},
              ),
            );
          } ,
        ),
        )
      );
  }
}

Listview

ListView는 기본적으로 자식 위젯들의 너비를 제한하지 않고 가로 방향으로 확장되도록 합니다. 이 때문에 Container의 width 속성이 원하는 대로 작동하지 않을 수 있습니다.

• align을 사용하여 가로를 조정할 수 있음.

ListView는 모든 자식 위젯을 한 번에 생성.

• 목록에 포함된 항목의 수가 적을 때 적합.

ListView(
          padding: EdgeInsets.all(16.0),
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo),
              title: Text('Photo'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),

children 을 통해 이런식으로 사용 가능

ListView.builder

ListView.builder는 목록의 항목을 필요할 때마다 생성.

• 목록이 길어질 때 성능을 최적화하는 데 유용.

ListView.builder(
          padding: EdgeInsets.all(16.0),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              leading: Icon(Icons.label),
              title: Text('${items[index]}'),
            );
          },
        ),

이런 식으로 사용 가능.