[flutter] flutter 위젯(widget)

0. 들어가기

-. 고정된 화면 표현을 하기 위한 stateless 위젯 사용방법.

1. Hello World

-. 어느 언어나 그렇듯, 시작은 Hello World! 로.

-. Flutter는 화면의 각 구성요소가 widget으로 이루어져 있댄다. home에 Text widget을 넣어 텍스트 표현을 할 수 있다.

import 'package:flutter/material.dart'; // flutter 기본 라이브러리

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {

    return MaterialApp(home:Text('Hello World!'),); // Text widget 

  }
}

2. App bar + Body 구조

-. Flutter에서는 스캐폴드(Scaffold, 발판) 위젯에 appBar과 body 구조를 이용해 페이지 상단의 제목줄과 본문 내용을 표현할 수 있다. 디자인은 안드로이드/ios 각각 기본형을 따라감.

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
      appBar: AppBar(
        title: const Text('Test Project'),
      ),
      body: Text('Test Project BODYBODYBODY'),
    ),
    );

  }
}

3. Body에 컬럼 삽입

-. Flutter는 하나하나의 구조가 모두 위젯이고, 두개 이상의 텍스트 표현으 위해선 html의 div 마냥 column/row 구성이 필요하다. Flutter.dev에서 제공하는 아래 개념도가 쉽게 설명해준다. (원본링크)

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
        appBar: AppBar(
          title: const Text('Test Project'),
        ),
        body: Column(
          children: const [
            Text('Test Project BODYBODYBODY'),
            Text('Test Project BODYBODY2222'),
          ],
        )
    ),
    );

  }
}

4. 화면 텍스트 변경 시도

-. 기본기능 확인의 마지막으로, 버튼과 버튼을 누르면 텍스트 변경을 시도해본다.

1) 버튼을 추가해 능동형 화면 구성

-. 화면에 버튼을 넣고, 버튼을 누르면 원하는 텍스트가 출력되도록 구성해보자.

-. Button widget에 함수를 연결해서, 해당 버튼이 클릭될 때 출력 텍스트 (output_text)가 변경되는 구조를 만들었다. (그리고 확인차 해당 output_text 변수를 터미널로 출력한다.

//5 - button
class MyApp extends StatelessWidget {
  var output_text = "Click the button: ";

  void buttonClicked() {
    output_text = output_text + 'button 1 clicked!!!';
    print(output_text);
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Test Project'),
          ),
          body: Column(
            children: [
              Text(output_text),
              ElevatedButton(
                  child: Text('1 Click Me!!'),
                  onPressed: buttonClicked,
              ),
              ElevatedButton(
                child: Text('2 Click Me!!'),
                onPressed: () => output_text = output_text + 'button 2 clicked',
              ),
              ElevatedButton(
                child: Text('3 Click Me!!'),
                onPressed: () {
                  output_text = output_text + 'button 3 clicked!!!';
                  print(output_text);
                },
              ),
            ],
          )),
    );
  }
}

-. 화면 구성은 정상적으로 되었으나, 표시되는 텍스트는 변하지 않는다. 혹시 버튼이 작동하지 않는 것인지 터미널 출력을 보자.

-. 터미널 출력은 정상적으로 작동하는 것을 확인했다. 버튼 기능의 문제는 아닌듯한데 어디서 잘못된 것일까?

2) stateful widget 구성

-. flutter에선 앱의 상태 (state)를 업데이트 할 수 있는 statefull widget을 사용해야 능동적 화면 표현이 가능하다.

-. 해보니 (일단은) 어렵진 않고, 모체가 되는 위젯을 StatelessWidget -> StatefulWidge 으로 변경해주고 출력 변수가 변경되는 구문에 상태 재설정 (setState)을 해주면 된다.

//6 - stateful widget
class MyApp extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  var output_text = "Click the button: ";

  void buttonClicked() {
    setState(() {
      output_text = output_text + 'button 1 clicked!!!';
    });
    print(output_text);
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Test Project'),
          ),
          body: Column(
            children: [
              Text(output_text),
              ElevatedButton(
                  child: Text('1 Click Me!!'),
                  onPressed: buttonClicked,
              ),
              ElevatedButton(
                child: Text('2 Click Me!!'),
                onPressed: () => output_text = output_text + 'button 2 clicked',
              ),
              ElevatedButton(
                child: Text('3 Click Me!!'),
                onPressed: () {
                  setState(() {
                    output_text = output_text + 'button 3 clicked!!!';
                  });
                  print(output_text);
                },
              ),
            ],
          )),
    );
  }
}

-. 의도한대로 버튼 클릭 시 텍스트 변경되는 것이 확인된다. (버튼2는 setstate를 하지 않는 버튼으로 텍스트 변경이 안됨)