[flutter] 커스텀 위젯 (class, 변수) | ListView.() | FAB

class

어떤 위젯을 만들 때 길어질 때 class 로 만들어 줄 수 있음

stless 엔터 치고, 밑처럼 class이름, return 에 원하는 코드 넣어주면 끝!

class ShopItem extends StatelessWidget {
  const ShopItem({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Text('안녕'),
    );
  }
}

ShopItem()이라는 커스텀위젯이 만들어짐

• 문법 설명
  class (class이름) extends StatelessWidget(
  : StatelessWidget()을 class로 넣겠다는 거
  @Override : 덮어씌움

var a = SizedBox(
  child: Text('안녕'),
);

이렇게 짧게 쓸 수 있음

변수, 함수 문법으로 축약

var a = SizedBox(
  child: Text('안녕'),
);

그냥 이렇게 a라는 변수에 넣을 수 있음
근데 성능상 문제가 있을 수 있음
바뀌지 않는 거 (로고, 상단바,,)만 변수에 넣자!

데이터들이 바뀌는 거(좋아요 개수 등) 이런 건 class로 넣기!

아무거나 다 커스텀위젯화 하지 말고
재사용이 많은 UI들, 페이지 등만 커스텀화하자

스크롤바 있는 목록 ListView()

**ListView()안에 넣으면

• 스크롤바 생김
• 스크롤 위치 감시 가능 -> controller:
• 메모리 절약

이렇게 스크롤바 있는 list가 생김

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(a.toString()),
          onPressed: (){
            print(a);
            a++;
          },
        ),
        appBar: AppBar(),
        body: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, i){
            return ListTile(
              leading: Icon(Icons.account_circle_rounded),
              title: Text('홍길동'),
            );
          },
        ),
      ),
    );
  }
}

이렇게도 가능

ListView.builder()

ListView.builder(
  itemCount: 3 #3번 반복,
  itemBuilder: (c, i){ #이 위젯이 / c, i 넣어줘야 함. i는 위젯 반복생성될 때마다 +1되는 정수
    return Text('안녕');
    },

itemCount: 리스트갯수
itemBuilder: (){ return 반복할 위젯 }

FloatingActionButton() -> 줄여서 FAB!

MaterialApp(
  home: Scaffold(
    floatingActionButtion: FloatingActionButton(
      child : Text('버튼'),
      onPressed: (){}
    ),
    appBar: AppBar(),
    body: 생략
  ),
)

floatingActionButton: FloatingActionButton(
  child: Text(a.toString()), a라는 변수를 버튼위젯에 보여주고 싶다!
  onPressed: (){
    print(a);
    a++;
    }

class MyApp안에

var a = 1;

만들어주면 const 에러밑줄 생김 -> 지워주자!

콘솔에는 숫자 늘어나는데 버튼 숫자는 안 바뀜 -> 재렌더링 안 돼서 그럼!