Flutter의 기본

semin Ryu·2023년 11월 29일

플러터에서 가장 중요한 개념은 'Widget'입니다. 위젯은 화면에 표시되는 모든 요소를 의미하며, 레고 블록처럼 서로 쌓아서 앱을 구성합니다.

모든 위젯은 클래스로 구성되어 있으며, 이 중 StatelessWidget과 StatefulWidget이 가장 중요한 클래스입니다. 모든 위젯 클래스는 build 메서드를 구현해야 합니다. 이 메서드는 위젯의 UI를 만들어 반환합니다.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

runApp

모든 플러터 앱은 runApp 함수로 시작합니다. 이 함수는 MaterialApp 또는 CupertinoApp 위젯을 받아 앱을 구동합니다.

MaterialApp은 Android 디자인을 반영
CupertinoApp은 iOS 디자인을 반영

void main() {
  runApp(MaterialApp(
    home: MyWidget(),
  ));
}

StatelessWidget은 상태를 가지지 않는 위젯을 만드는 데 사용됩니다. 이 위젯은 한 번 그려지면 그 상태가 변하지 않습니다.

반면에 StatefulWidget은 상태에 따라 UI가 변하는 위젯을 만드는 데 사용됩니다. 이 위젯은 setState 함수를 통해 상태를 업데이트하고, UI를 다시 그립니다.

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: _incrementCounter,
      child: Text('$_counter'),
    );
  }
}

주요 위젯과 속성

플러터에서는 다양한 위젯을 제공하고 있으며, 이들은 각각 다양한 속성을 가지고 있습니다. 예를 들어, Scaffold 위젯은 앱의 기본 레이아웃을 제공하며, appBar, body 등의 속성을 가지고 있습니다.

Scaffold(
  appBar: AppBar(
    title: Text('Hello, Flutter!'),
  ),
  body: Center(
    child: Text('Hello, World!'),
  ),
)

반복적으로 사용하는 중요한 위젯

플러터에서는 Column, Row, Container 등의 위젯이 자주 사용됩니다. 이들은 각각 다양한 레이아웃을 구성하는 데 사용됩니다.

Container(): Container 위젯은 child를 사용하여 단일 자식을 가질 수 있으며, 여러 다른 위젯을 감싸서 마진, 패딩, 배경색, 테두리 등을 적용할 수 있습니다. Container는 decoration 속성을 통해 배경색이나 테두리 등을 설정할 수 있습니다.

Column(): Column 위젯은 여러 위젯을 세로 방향으로 배열합니다
Row(): Row 위젯은 여러 위젯을 가로 방향으로 배열합니다.