[flutter] widget 모듈화 + 스타일링

0. 들어가기

-. 플러터 widget을 모듈화 해서 간편하게 이용해 본다.

-. 모듈화 된 김에 조금 더 이쁘게(복잡하게) 꾸미고 여러번 사용해 보자.

1. widget 모듈화

-. 앞에서 만들었던 question 위젯을 모듈화해보자. Vue랑 비슷하게 하면 되는거같다.

-. 우선 text로 출력하던 부분만 먼저 Question 모듈로 변경.

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  String question;

  Question(this.question);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text(question);
  }

}

-. 그리고 main.dart 최 상단에서 해당 모듈 파일을 import 해준다.

import 'package:flutter/material.dart';
import './question.dart'; //모듈 로드

class MyAppState extends State<MyApp> {
...
          body: Column(
            children: [
              Question(output_text), //기존 Text 대신 Question으로 선언
...
}

-. 앞에서 엉망으로 표기했던 text 출력도 조금 손봐서 button 1,2,3이 눌릴 때 각각 1,2,3이 출력되도록 수정했다.

2. 스타일 개선

-. 언제까지고 투박하게 텍스트 출력만 할 순 없으니 조금 이쁘게 꾸며보자.

-. 아래와 같이 코드를 변경한다. text를 감싸는 Container를 설정하고, 그 안에 텍스트를 넣자.

Text(question) // 기존 텍스트만

----
//변경 Container 안에 텍스트
Container(
      width: double.infinity,
      margin: const EdgeInsets.all(10),
      color: Colors.amber[600],
      child: Text(
        question,
        style: const TextStyle(fontSize: 28),
        textAlign: TextAlign.center,
      ),
    );

-. 아래 그림처럼 디자인이 변경되는 것을 확인할 수 있다.

-. 위젯 카탈로그란게 있는데, 여기에서 컨테이너에 대한 자세한 설명을 볼 수 있으니 숙지하자...

3. 모듈화한 위젯 여러개 넣기

-. Question 모듈을 여러개 넣으면 된다. 버튼을 누를 때 추가된 위젯들이 동시에 반응하는 것을 확인할 수 있다.

...
body: Column(
            children: [
              Question(output_text),
              Question(output_text),
...