[Flutter]07 중요한 커스텀 위젯 문법

ref : 코딩 애플 [쉽게 배우는 플러터 강의]

---

레이아웃용 위젯들이 너무 길다면?

-> 한 단어로(커스텀 위젯으로) 깔끔하게 축약가능

 

커스텀 위젯 만드는 법

빈공간에다가 stless 치고 tab 키 누르면 기본 틀 자동 생성

 

 

만들 때 해야할 것 

1. class 작명

2. return 옆에 축약할 레이아웃 넣기

일단 class 이름은 ShopItem 으로 했고 

축약할 레이아웃을 return 뒤에 넣어주었다. 이제 저 레이아웃은 ShopItem 이라는 한 단어로 축약해서 사용이 가능하다.

---

사실 맨 위에다가 변수에 넣어서 축약할 수도 있다,

-> 하지만 성능에 문제가 있을 수 있으니 주의

 

변하지 않는 UI 들은 변수 함수로 축약해도 상관 없음

하지만 그렇다고 아무거나 다 커스텀위젯화를 하는건 옳지 않다

재사용이 많은 UI 들, 큰 페이지 들은 커스텀 위젯화 하면 유용할거다.

---

앱은 위젯이 많다고 해서 스크롤바가 자동으로 생성되지 않는다.

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: Column(
              children: [
                Text('안녕'),
                Text('안녕'),
                Text('안녕'),
                Text('안녕'),
                Text('안녕'),
              ],
            )
        )
    );

  }
}

스크롤바가 생기도록 하려면 ListView 을 써야한다.

 

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: ListView(
              children: [
                Text('안녕'),
                Text('안녕'),
                Text('안녕'),
                Text('안녕'),
                Text('안녕'),
              ],
            )
        )
    );

  }
}

ListView 를 쓰는 또다른 이유는 스크롤 위치 감시도 가능하다(controller).

그리고 메모리 절약기능도 있다.

---