커스텀 위젯

커스텀 위젯 만드는 법

stless 하고 tab 키 누르면 만들어짐.

  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(),
          body: ShopItem() // 커스텀 위젯 사용부분
        )
      );
    }
  }
// 여기가 커스텀 위젯
  class ShopItem extends StatelessWidget { // 커스텀 위젯은 class로 만든다.
  // 커스텀 위젯 되려면 class 안에 변수 많이 넣어야 함.
    const ShopItem({Key? key}) : super(key: key); // 몰라도 됨.

    @override // 클래스 만들 때 extends 옆에 애를 복사하는 것임. 
    // StatelessWidget 안에 build 가 있을 수 있으니까 중복되어도 상관 없게 해주세요 하는 것임
    Widget build(BuildContext context) { // 함수 임. 괄호 안에는 (파라미터고)
      return SizedBox(
        child: Text('안녕'),
      );
    }
  }

주석 안에 설명 참조..

쉬운 방법으로 긴 레이아웃 축약 가능

변수에 담는 방법임.

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


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super  (key:key);
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(),
        body: a
      )
    );
  }
}

변수에 담으면 그대로 대치된다고 생각하면 됨.

아무거나 다 커스텀 위젯으로 만들면 좋겠네요?? 아님 그러면 너무 복잡함

재사용 많은 UI
큰 페이지로 만듬.

ListView

우리가 앱에 보여줄 항목이 100개라면?

이거 100개 만들거야?? 그러면 스크롤바가 안생김

그럴 땐 ListView 안에 담아라!

```dart
 body: ListView(
          children: [
            Text('안녕'),
            Text('안녕'),
            Text('안녕'),
            Text('안녕'),
            Text('안녕'),
            Text('안녕'),
          ]
        )

ListView에 담으면

스크롤바가 생김.
스크롤 위치 감시도 가능함.
메모리 절약 기능도 있음.

쇼핑몰, 인스타그램 피드 들… 다 리스트뷰라고 보면 된다.. 근데 왜 난 스크롤바가 안뜨지??

숙제 답

var bottomAppBar = BottomAppBar(
    child: Container(
      height: 70,
      child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 적절히 떨어뜨림.
          children:[
            Icon(Icons.phone),
            Icon(Icons.message),
            Icon(Icons.contact_page)
          ]
      ),
    )
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super  (key:key);
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: [
            ListTile( // ListTile 이라는 애를 써봤음.
              leading: Image.asset('wild-dog.jpg'),
              title:Text('홍길동')
            ),
          ]
        ),
        bottomNavigationBar: bottomAppBar
      )
    );
  }
}

문제점.

ListTile 100개 어떻게 만들거야? 반복문.. 사용!

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

body: ListView.builder(
            itemCount: 3, // 몇번 반복?
            itemBuilder: (context, index){ // 
              return Text('who');
            }),

body: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index){
              return ListTile( 
                  leading: Image.asset('wild-dog.jpg'),
                  title:Text(index.toString())
              );
            }),

print() 안에 넣어주면 디버깅 가능함.

여기까지가 레이아웃

Flutter 공부-6 커스텀위젯