[플러터] 기본 개념

UI 구성 요소

위젯(Widget)

컴포넌트(Component)

디자인 시스템

Material Design

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Material Design App')),
    body: Center(child: ElevatedButton(onPressed: () {}, child: Text('Button'))),
  ),
)

Cupertino Design

CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(middle: Text('Cupertino Design App')),
    child: Center(child: CupertinoButton(onPressed: () {}, child: Text('Button'))),
  ),
)

Flutter Widget Index

Flutter widget index

An alphabetical list of Flutter widgets.

https://docs.flutter.dev/reference/widgets

Inset (여백 영역)

SafeArea(
  child: Container(
    // 여기에 내용을 배치하면 inset 영역을 피해서 표시된다.
  ),
)

STL (Stateless Widget), STF (Stateful Widget)

1. Stateless Widget (STL) - 상태가 변하지 않는 정적인 위젯 Stateless Widget은 한 번 생성되면 변경되지 않는 불변(immtable) 위젯이다.

class MyStatelessWidget extends StatelessWidget {
  final String text;

  const MyStatelessWidget({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20.0),
      child: Text(text),
    );
  }
}

2. Stateful Widget (STF) - 상태가 변할 수 있는 동적인 위젯

class CounterButton extends StatefulWidget {
  const CounterButton({Key? key}) : super(key: key);

  @override
  _CounterButtonState createState() => _CounterButtonState();
}

class _CounterButtonState extends State<CounterButton> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        setState(() {
          _count++;
        });
      },
      child: Text('클릭 횟수: $_count'),
    );
  }
}