Widget

Widget catalog

• Flutter 에 있는 모든 요소는 Widget
• Widget 을 조합해서 앱 개발

프로그래밍에서의 Widget

class App extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }

}

• 하나의 Class
• build 메소드가 Widget UI 반환
• 리턴 값으로 family 스타일 지정
  1. material 앱 리턴
     • 구글 디자인 시스템
     • 보통 material 선택
  2. cupertino 앱 리턴
     • 애플 디자인 시스템

Scaffold Class

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter'),
        ),
        body: Center(
          child: Text('Hello world'),
        ),
      ),
    );
  }
}

• 앱의 구조 제공

재사용 가능한 Widget

• Extract Widget 기능 사용

/widgets/button.dart

// Flutter Stateless Widget
import 'package:flutter/cupertino.dart';

class Button extends StatelessWidget {

	final String text;
	final Color bgColor;
	final Color textColor;

	Button({
		super.key,
    required this.text,
    required this.bgColor,
    required this.textColor,
  });

  @override
  Widget build(BuildContext context) {
    return 재사용할 코드;
  }
}

• 수동으로 추출
• 생성한 클래스에 받을 property 생성
• 생성자 생성

Container Widget

• div 와 같은 기능
• 단순한 box