'플러터'에 해당되는 글 32건

수업도 하고 창업 준비도 하고..
그리고 놀기도 해야 하고..
하루가 길지 않음을 새삼 느끼게 된다.

플러터를 사용하는 기본적인 코드조차 머리 속에 남아있지 않음을 느끼며
이건 빨리 우재 시켜야겠다는 생각이 든다.
딥러닝 모델을 플러터에 얹으려니
카메라 사용을 먼저 처리하지 않으면 아무 것도 할 수 없어서
어쩔 수 없이 시간을 내야 했다.
머리가 너무 아프다.

앱을 구동하면 나타나는 화면.
사진도 카메라도 없기 때문에 'EMPTY' 문자열을 표시했다.
갤러리에서 사진을 선택해서 가져오면 오른쪽과 같은 모양이 된다.
이때 안드로이드 에뮬레이터 또는 아이폰 시뮬레이터에서 가져와야 하기 때문에
갤러리 또는 앨범에 사진이 들어있어야 한다.
에뮬레이터에 사진을 추가하는 방법은 다른 사이트를 참고하도록 한다.

카메라 버튼을 선택하면 촬영 모드로 들어가고
촬영한 이후에는 갤러리에서 가져오는 것과 동일하다.
실물이 훨씬 낫다.

잘 봤겠지?
이제부터 앞에서 본 것처럼 훌륭한 앱을 직접 만들어 보자.
약간 업된 것 같은 이유는
앱을 코딩했을 때는 도서관이었지만
이 글을 쓰는 곳은 바닷가이기 때문이다.
서핑하러 인구해변에 왔는데
역스웰이래나 뭐래나.. 그냥 파도가 없을 뿐이다.

프로젝트를 생성하고
pubspec.yaml 파일을 열어서 image_picker 모듈을 가져온다.
dependencies 영역 마지막에 'image_picker:'라고 쓴다.
버전을 생략하면 최신 버전을 가져온다는 뜻이다.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

  # 최신 버전 사용하도록 버전 명시하지 않음
  image_picker:

main.dart 파일을 작성한다.
앞서 봤던 것처럼 처음에 문자열을 표시했다가
사진을 선택하면 해당 사진으로 바꾼다.

우리가 할건 없고 ImagePicker 라이브러리에
갤러리(ImageSource.gallery) 또는 카메라(ImageSource.camera)를 전달하기만 하면 된다.

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';    // 앨범과 카메라 모두에 대해 작동


class ImageAndCamera extends StatefulWidget {
    @override
    ImageAndCameraState createState() => ImageAndCameraState();
}


class ImageAndCameraState extends State<ImageAndCamera> {
    // 파일 경로 문자열은 카메라에서는 에러 발생했다. image_picker 모듈에서 File 객체 반환.
    File mPhoto;
    
    @override
    Widget build(BuildContext context) {
        Widget photo = (mPhoto != null) ? Image.file(mPhoto) : Text('EMPTY');

        return Container(
            child: Column(
                children: <Widget>[
                    // 버튼을 제외한 영역의 가운데 출력
                    Expanded(
                        child: Center(child: photo),
                    ),
                    Row(
                        children: <Widget>[
                            RaisedButton(
                                child: Text('앨범'),
                                onPressed: () => onPhoto(ImageSource.gallery),  // 앨범에서 선택
                            ),
                            RaisedButton(
                                child: Text('카메라'),
                                onPressed: () => onPhoto(ImageSource.camera),   // 사진 찍기
                            ),
                        ],
                        mainAxisAlignment: MainAxisAlignment.center,
                    ),
                ],
                // 화면 하단에 배치
                mainAxisAlignment: MainAxisAlignment.end,
            ),
        );
    }

    // 앨범과 카메라 양쪽에서 호출. ImageSource.gallery와 ImageSource.camera 두 가지밖에 없다.
    void onPhoto(ImageSource source) async {
        // await 키워드 때문에 setState 안에서 호출할 수 없다.
        // pickImage 함수 외에 pickVideo 함수가 더 있다.
        File f = await ImagePicker.pickImage(source: source);
        setState(() => mPhoto = f);
    }
}

void main() {
    runApp(MaterialApp(
        home: MaterialApp(
            title: '앨범 + 카메라',
            home: Scaffold(
                appBar: AppBar(title: Text('앨범 + 카메라'),),
                body: ImageAndCamera(),
            )
        )
    ));
}

http 프로토콜을 다루는 방식에는 여러 가지가 있지만
get과 post 정도만 사용해도 왠만한 것은 처리할 수 있다.
지금까지는 get 방식을 사용해서 서버로부터 데이터를 수신하기만 했다.
get 방식은 가져오기만 하고 보낼 수는 없다.

이번 글에서는 post 방식을 통해
서버로 데이터를 전송하고 결과를 수신하는 코드를 만든다.

상단 왼쪽의 위젯은 사용자 입력을 받는 TextField이고
상단 오른쪽의 위젯은 덧셈과 곱셈 연산의 결과를 보여주는 Text 위젯이다.
서버로 보내는 데이터가 너무 단순해서 실망할 수도 있겠지만
이번 코드를 조금만 확장하면
딥러닝 모델에서 예측해야 하는 데이터를 전송하기에 부족함이 없다.

서버 코드는 이전에 비해 훨씬 간결하게 처리했다.
덧셈과 곱셈 서비스인 add와 multiply 함수밖에 없지만,
함수 위쪽에 지정된 methods에 POST가 추가되어 있음을 눈여겨 보도록 한다.

클라이언트(플러터 앱)로부터 수신한 데이터는 모두 문자열이기 때문에
계산하기 전에 int 함수로 형 변환을 해야 한다.

참.. IP 주소는 자신의 컴퓨터 주소를 쓰는 것도 잊지 말자.
서버 주소가 계속해서 바뀐다.
도서관에서 작업하다가 집에 와서도 계속이다.
어제는 대전에 있었고 토요일 아침인 지금은 강원도 망고서프에 있다.
예제를 구동할 때마다 번거롭다.

from flask import Flask, request

app = Flask(__name__)


@app.route('/add', methods=['POST'])
def add():
    left = request.form['left']
    rite = request.form['rite']

    return str(int(left) + int(rite))


@app.route('/multiply', methods=['POST'])
def multiply():
    left = request.form['left']
    rite = request.form['rite']

    return str(int(left) * int(rite))


if __name__ == '__main__':
    app.run(host='192.168.0.125', debug=True)

플러터 앱을 만드고 나서
pubspec.yaml 파일에 http 모듈을 추가하도록 한다.
모든 설명은 코드에 직접 달았으니 코드를 꼼꼼하게 살펴보도록 한다.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;


void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text('서버/클라이언트')),
        body: MyApp(),
    ))
);

class MyApp extends StatefulWidget {
    @override
    State createState() => MyAppState();
}

// 덧셈/곱셈 상수 정의
enum DataKind { NONE, ADD, MULTIPLY }

// 서버가 동작하는 컴퓨터의 IP 주소. 192는 사설 IP, 5000은 플라스크 기본 포트.
final gServerIp = 'http://192.168.0.125:5000/';

class MyAppState extends State<MyApp> {
    DataKind mKind = DataKind.NONE;
    
    String mResult = '0';               // 서버로부터 수신한 덧셈 또는 곱셈 결과
    String mLeftText, mRiteText;        // 사용자가 입력한 연산의 왼쪽과 오른쪽 항의 값

    // post 동작의 결과를 수신할 비동기 함수
    // 연산할 데이터를 전달(post)해야 하기 때문에 멤버로 만들어야 했다.
    Future<String> postReply() async {
        if(mLeftText == null || mRiteText == null)
            return '';

        // 문자열 이름은 서버에 정의된 add와 multiply 서비스
        var addr = gServerIp + ((mKind == DataKind.ADD) ? 'add' : 'multiply');
        var response = await http.post(addr, body: {'left': mLeftText, 'rite': mRiteText});

        // 200 ok. 정상 동작임을 알려준다.
        if (response.statusCode == 200)
            return response.body;

        // 데이터 수신을 하지 못했다고 예외를 일으키는 것은 틀렸다.
        // 여기서는 코드를 간단하게 처리하기 위해.
        throw Exception('데이터 수신 실패!');
    }
    
    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                        Expanded(
                            child: Padding(
                                // TextField 위젯은 사용자 입력을 받는다.
                                // Expanded 또는 Flexible 등의 위젯의 자식이어야 한다.
                                child: TextField(
                                    textAlign: TextAlign.center,
                                    style: TextStyle(fontSize: 25),
                                    keyboardType: TextInputType.number,     // 숫자만 입력
                                    onChanged: (text) => mLeftText = text,  // 입력할 때마다 호출
                                ),
                                padding: EdgeInsets.all(10.0),
                            ),
                        ),
                        Expanded(
                            child: Padding(
                                child: TextField(
                                    textAlign: TextAlign.center,
                                    style: TextStyle(fontSize: 25),
                                    keyboardType: TextInputType.number,
                                    onChanged: (text) => mRiteText = text,
                                ),
                                padding: EdgeInsets.all(10.0),
                            ),
                        ),
                        Expanded(
                            child: Container(
                                child: Padding(
                                    // 연산 결과 표시. Text는 보여주기 전용 위젯
                                    child: Text(mResult,
                                        textAlign: TextAlign.center,
                                        style: TextStyle(fontSize: 25),
                                    ),
                                    padding: EdgeInsets.all(10.0),
                                ),
                                color: Colors.orange,
                            ),
                        ),
                    ],
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                        RaisedButton(
                            child: Text('덧셈'),
                            onPressed: () {
                                if(mLeftText != null && mRiteText != null) {
                                    mKind = DataKind.ADD;
                                    // postReply 함수는 비동기 함수여서 지연 처리
                                    // then : 수신 결과를 멤버변수에 저장
                                    // whenComplete : // 비동기 연산 완료되면 상태 변경
                                    try {
                                      postReply()
                                          .then((recvd) => mResult = recvd)
                                          .whenComplete(() {
                                              if(mResult.isEmpty == false)
                                                  setState(() {});
                                      });
                                    } catch (e, s) {
                                      print(s);
                                    }
                                }
                            },
                        ),
                        RaisedButton(
                            child: Text('곱셈'),
                            onPressed: () {
                                // 입력했다가 삭제하면 빈 문자열이 될 수 있다.
                                // 빈 문자열은 계산할 수 없으므로 예외 발생
                                // 숫자로 변환할 수 없는 문자열에 대해서도 예외가 발생하지만
                                // 숫자만 받을 수 있는 키보드를 사용함으로 해결했다.
                                if (mLeftText != null && mRiteText != null) {
                                    mKind = DataKind.MULTIPLY;
                                    postReply()
                                        .then((recvd) => mResult = recvd)
                                        .whenComplete(() {
                                            if(mResult.isEmpty == false)
                                                setState(() {});
                                    });
                                }
                            }
                        ),
                    ],
                ),
            ],
        );
    }
}

이전 글인 "28. 플러터 : 서버/클라이언트 연동 (3)"에서 언급한
사설 IP 주소로 파이썬 애니웨어를 대신하는 것에 대한 설명이다.
중요한 건 이전 글에 나왔으니까
여기서는 달라진 부분에 대해서만 언급하도록 한다.

이전 예제에서는 클라이언트에 해당하는 앱은 플러터로 구현하고
서버는 만들어져 있는 것을 가져다 사용했다.
이제 우리만의 서버를 직접 만들어서 연동하도록 하자.

윈도우에서는 cmd, 맥과 리눅스에서는 터미널을 실행하도록 한다.
cmd에서는 ipconfig, 터미널에서는 ifconfig 명령을 입력하면 IP 주소를 확인할 수 있다.
대부분 공유기에 연결된 네트웍을 사용하기 때문에 192로 시작하는 주소가 할당된다.
192로 시작하는 주소를 사설 IP 주소라고 부르고
공유기를 통해서만 외부로 나갈 수 있고, 외부에서 직접 연결할 수는 없는 주소를 말한다.

아래 화면은 맥북에서 캡쳐했고, "192.168.35.125"를 코드에서 사용한다.
이 부분은 반드시 자신의 IP 주소를 사용해야 한다.

이전 글과 달라진 부분은 마지막 줄의 run 함수 호출이다.
막혀 있던 주석을 풀었고, host 매개변수에 "192.168.35.125"를 전달했다.

from flask import Flask
import json

app = Flask(__name__)


# 루트 인터페이스. 서버 주소(127.0.0.1:5000)의 루트 폴더.
@app.route('/')
def index():
    return 'home. nothing.'


# 루트 아래의 string 폴더에 접근할 때 보여줄 내용
@app.route('/string')
def send_string():
    return '취미 : 서핑, 스노보드, 배드민턴'


# 사진은 앱에서 파일에 직접 접근하기 때문에 이름만 알려주면 된다.
@app.route('/image')
def send_image():
    return 'book.jpg'


# 배열이나 사전 등의 프로그래밍 언어 객체는 문자열로 변환해서 전달해야 하고
# json 또는 xml 등을 사용하게 된다. 여기서는 json 사용.
@app.route('/array')
def send_array():
    items = [
        {'id': 12, 'content': '세상은 호락호락하지 않다. 괜찮다. 나도 호락호락하지 않다.'},
        {'id': 45, 'content': '공부를 많이 하면 공부가 늘고 걱정을 많이 하면 걱정이 는다.'},
        {'id': 78, 'content': '참아야 한다고 배워 힘든 걸 참고 행복도 참게 되었다.'},
    ]
    return json.dumps(items)


if __name__ == '__main__':
    app.run(host='192.168.35.125', debug=True)

결과 화면은 똑같다. 달라진 것이 없다.

파이썬 애니웨어의 주소만 "192.168.35.125"로 수정했다. 수정한 곳은 두 군데.

import 'dart:async';
import 'dart:convert'; // json 관련

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;


void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text('서버/클라이언트')),
        body: MyApp(),
    ))
);

// 수신 데이터의 종류를 상수로 설정
enum DataKind { NONE, STRING, IMAGE, ARRAY }

// 3가지 형태의 문자열 수신 : 단순 문자열, json 문자열, 이미지 주소 문자열.
Future<String> fetchString(DataKind kind) async {
    if(kind == DataKind.NONE)
        return '';
    
    final details = ['', 'string', 'image', 'array'];
    final urlPath = 'http://192.168.35.125/' + details[kind.index];
    
    final response = await http.get(urlPath);
    
    if (response.statusCode == 200)
        return response.body;
    
    throw Exception('데이터 수신 실패!');
}

class MyApp extends StatefulWidget {
    @override
    State createState() {
        return MyAppState();
    }
}

class MyAppState extends State<MyApp> {
    DataKind mKind = DataKind.NONE;
    
    Widget makeChild(String str) {
        switch (mKind) {
            case DataKind.NONE:
                return Placeholder(); // 아무 것도 수신하지 않았을 때 사용
            case DataKind.STRING:
                return Text(str, style: TextStyle(fontSize: 25),);
            case DataKind.IMAGE:
                return Image.network('http://192.168.35.125/static/' + str);
            default:    // str : 사전을 담고있는 배열 형태의 json 문자열.
                final items = json.decode(str);
                final textStyle = TextStyle(fontSize: 21, fontWeight: FontWeight.bold);
                
                List<Container> widgets = [];
                for(var item in items) {
                    widgets.add(    // 여백을 통해 위젯을 보기좋게 배치하기 위해 Container 사용
                        Container(
                            child: Column(
                                children: <Widget>[
                                    Text(item['id'].toString(), style: textStyle),
                                    Text(item['content'], style: textStyle, softWrap: true),
                                ],
                            ),
                            padding: EdgeInsets.all(20.0),
                        ),
                    );
                }
                return Column(children: widgets);
        }
    }
    
    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                FutureBuilder(
                    future: fetchString(mKind),
                    builder: (context, snapshot) {
                        if (snapshot.connectionState == ConnectionState.done) {
                            return Expanded(
                                child: Center(
                                    child: makeChild(snapshot.data),
                                ),
                            );
                        }
                        else if (snapshot.hasError) {
                            return Text('${snapshot.error}');
                        }
                        
                        return Expanded(
                            child: Center(
                                child: CircularProgressIndicator(),
                            ),
                        );
                    },
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                        RaisedButton(
                            child: Text('수신 안함'),
                            onPressed: () {
                                setState(() {
                                    mKind = DataKind.NONE;
                                });
                            },
                        ),
                        RaisedButton(
                            child: Text('문자열'), // 정직하게 함수를 두 번 호출하는 코드
                            onPressed: () {
                                setState(() {
                                    mKind = DataKind.STRING;
                                });
                            },
                        ),
                        RaisedButton(
                            child: Text('사진'),  // 한 번은 정직하게, 한 번은 => 문법 사용
                            onPressed: () {
                                setState(() => mKind = DataKind.IMAGE);
                            },
                        ),
                        RaisedButton(
                            child: Text('배열'),  // 두 번 모두 => 문법 사용. 간단하지만 가독성에서는 어렵다.
                            onPressed: () => setState(() => mKind = DataKind.ARRAY),
                        ),
                    ],
                ),
            ],
        );
    }
}

이전 예제에서는 클라이언트에 해당하는 앱은 플러터로 구현하고
서버는 만들어져 있는 것을 가져다 사용했다.
이제 우리만의 서버를 직접 만들어서 연동하도록 하자.

이번 예제는 직접 만든 서버로부터 다양한 형태의 데이터를 수신한다.
데이터의 종류에는 문자열, 사진, 배열이 있고
스마트폰 앱에서 해당 버튼을 누르면 연결된 데이터만 보여주는 방식이다.

서버는 파이썬의 플라스크(flask)로 구현했다.
아쉽지만 여기는 파이썬하고는 상관 없기 때문에 이 부분은 간단하게 넘어가기로 한다.
그래도 우재는 할 수 있잖아?
아빠한테 다 배웠으니까..

로컬에서 서버를 구동했더니 로컬 호스트(127.0.0.1)를 안드로이드 에뮬레이터에서 인식을 못한다.
할 수 없이 파이썬애니웨어(pythonanywhere.com)의 도움을 받는다.
가입하면 무료로 웹 서버를 하나 구동할 수 있다. 지금처럼.
(현재 글을 작성할 때는 로컬 호스트에 대해서만 검증했고 로컬에서 동작하지 않았다.
수업을 준비하는 과정에서 다시 살펴봤고 사설 IP 주소로 동작하는 것을 확인했다.
그러나, 파이썬 애니웨어에 대해 알아두는 것도 나쁘지 않기 때문에 관련 내용을 유지한다.
사설 IP 주소를 사용하는 코드는 다음 번 글에서 확인할 수 있다.)

from flask import Flask
import json

app = Flask(__name__)


# 루트 인터페이스. 서버 주소(127.0.0.1:5000)의 루트 폴더.
@app.route('/')
def index():
    return 'home. nothing.'


# 루트 아래의 string 폴더에 접근할 때 보여줄 내용
@app.route('/string')
def send_string():
    return '취미 : 서핑, 스노보드, 배드민턴'


# 사진은 앱에서 파일에 직접 접근하기 때문에 이름만 알려주면 된다.
@app.route('/image')
def send_image():
    return 'book.jpg'


# 배열이나 사전 등의 프로그래밍 언어 객체는 문자열로 변환해서 전달해야 하고
# json 또는 xml 등을 사용하게 된다. 여기서는 json 사용.
@app.route('/array')
def send_array():
    items = [
        {'id': 12, 'content': '세상은 호락호락하지 않다. 괜찮다. 나도 호락호락하지 않다.'},
        {'id': 45, 'content': '공부를 많이 하면 공부가 늘고 걱정을 많이 하면 걱정이 는다.'},
        {'id': 78, 'content': '참아야 한다고 배워 힘든 걸 참고 행복도 참게 되었다.'},
    ]
    return json.dumps(items)


# 파이썬애니웨어(www.pythonanywhere.com)에서 구동할 때는
# 아래 코드를 사용해선 안 된다. 로컬에서 구동할 때만 사용한다.
# if __name__ == '__main__':
#     app.run(debug=True)

파이썬애니웨어의 사용법은 해당 사이트에 가서 확인하자.

어려울 것이 전혀 없다.
프로젝트를 구성한 후에 static 폴더를 만들어서 'book.jpg' 파일을 하나 넣어둬야 아래 코드를 구동할 수 있다.

파이썬애니웨어 구성은 아래와 같은데.. 볼 건 없다.
왼쪽에 static과 templates 폴더가 있는데..
이번 예제에서는 templates 폴더는 사용하지 않는다.

이번에 만들 앱의 스크린샷이다.
화면이 4가지라서 캡쳐해서 깨끗하게 잘라내는 것도 힘들다.
첫 번째 사진은 서버로부터 아무 것도 가져오지 않았을 때를 가리킨다.

코드가 너무 길다.
150줄 정도 나왔는데.. 너무 많은 걸 보여주려고 한 것일까?

상수를 정의하기 위해 enum 클래스를 사용헀다. 
enum을 사용하지 않으면 당장은 편하지만 향후 불편할 수밖에 없다.
그리고 다트 문법도 익혀야 하는 관계로, 공부 차원에서 사용했다.

역시나 우재는 아래 코드 없이 화면만 보고 만들어 볼 수 있겠지?
파이썬애니웨어는 우재도 사용하고 있고.. 아빠보다 더 잘 하니까.
시간은 걸리겠지만..
고생하고 안 될 때만 살짝 보고. 아빠도 이번 코드는 진짜 오래 걸렸어.
아빠보다 빨리 하는 건 아니겠지?

참, 스냅샷의 connectionState 속성 사용하는 거 중요하니까.. 자세히 보고.
서버 구성은 클라이언트와 상관 없기 때문에 클라이언트 부분의 코드는 똑같을 수밖에 없다.
다만 서버쪽에서 어떤 방식으로 데이터를 전달하는지만 명확하게 하면 끝.
여기서는 사진을 제외하고는 모두 문자열로 처리.
수신 이후에 원하는 형태로 변환해서 사용하는 방식을 사용했다.

import 'dart:async';
import 'dart:convert';                  // json 관련

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;


void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text('서버/클라이언트')),
        body: MyApp(),
    ))
);

// 수신 데이터의 종류를 상수로 설정
enum DataKind { NONE, STRING, IMAGE, ARRAY }

// 3가지 형태의 문자열 수신 : 단순 문자열, json 문자열, 이미지 주소 문자열.
Future<String> fetchString(DataKind kind) async {
    if(kind == DataKind.NONE)
        return '';

    print(kind.toString());
    print(kind.toString().split('.')[1]);
    // 첫 번째 항목은 NONE. 비워두긴 했지만 루트(/)를 가리킨다는 뜻은 아니고, 사용 안함을 의미한다.
    final details = ['', 'string', 'image', 'array'];
    final urlPath = 'http://applekoong.pythonanywhere.com/' + details[kind.index];
    
    // 아래처럼 구하면 details 배열과 동기화시키지 않아도 된다.
    // 코드는 좀 복잡해지지만 업그레이드에서 유리할 수 있다.
    // DataKind.IMAGE 상수를 toString 함수에 전달하면 'DataKind.IMAGE'가 나온다.
    // final detail = kind.toString().split('.')[1].toLowerCase()
    // final urlPath = 'http://applekoong.pythonanywhere.com/' + detail;
    
    final response = await http.get(urlPath);
    
    if (response.statusCode == 200)
        return response.body;
    
    throw Exception('데이터 수신 실패!');
}

class MyApp extends StatefulWidget {
    @override
    State createState() {
        return MyAppState();
    }
}

class MyAppState extends State<MyApp> {
    DataKind mKind = DataKind.NONE;
    
    Widget makeChild(String str) {
        switch (mKind) {
            case DataKind.NONE:
                return Placeholder();       // 아무 것도 수신하지 않았을 때 사용
            case DataKind.STRING:
                return Text(str, style: TextStyle(fontSize: 25),);
            case DataKind.IMAGE:
                return Image.network('http://applekoong.pythonanywhere.com/static/' + str);
            default:
                // str : 사전을 담고있는 배열 형태의 json 문자열.
                final items = json.decode(str);
                final textStyle = TextStyle(fontSize: 21, fontWeight: FontWeight.bold);
                
                List<Container> widgets = [];
                for(var item in items) {
                    widgets.add(
                        // 여백을 통해 위젯을 보기좋게 배치하기 위해 Container 사용
                        Container(
                            child: Column(
                                children: <Widget>[
                                    Text(item['id'].toString(), style: textStyle),
                                    Text(item['content'], style: textStyle, softWrap: true),
                                ],
                            ),
                            padding: EdgeInsets.all(20.0),
                        ),
                    );
                }
                return Column(children: widgets);
        }
    }
    
    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                FutureBuilder(
                    future: fetchString(mKind),
                    builder: (context, snapshot) {
                        // 이전 예제에서는 hasData를 사용했는데, 이전 호출의 결과가 남아있을 수 있다.
                        // builder에 전달되는 함수는 무조건 2회 호출된다. 처음에는 waiting으로, 두 번째에는 done으로.
                        // done이라면 완료되었다는 뜻이고 에러가 발생했을 수도 있다.
                        if (snapshot.connectionState == ConnectionState.done) {
                            // 나머지 공간 전체를 사용하는데, 전체 공간을 사용하지 않는 위젯이라면 가운데에 배치.
                            return Expanded(
                                child: Center(
                                    child: makeChild(snapshot.data),
                                ),
                            );
                        }
                        else if (snapshot.hasError) {
                            // 에러 메시지는 굳이 화면 가운데에 놓을 필요가 없다.
                            return Text('${snapshot.error}');
                        }
        
                        // 인디케이터가 다른 위젯들처럼 화면 가운데에 위치시킨다.
                        return Expanded(
                            child: Center(
                                child: CircularProgressIndicator(),
                            ),
                        );
                    },
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                        RaisedButton(
                            child: Text('수신 안함'),
                            onPressed: () {
                                setState(() {
                                    mKind = DataKind.NONE;
                                });
                            },
                        ),
                        RaisedButton(
                            child: Text('문자열'),
                            // 정직하게 함수를 두 번 호출하는 코드
                            onPressed: () {
                                setState(() {
                                    mKind = DataKind.STRING;
                                });
                            },
                        ),
                        RaisedButton(
                            child: Text('사진'),
                            // 한 번은 정직하게, 한 번은 => 문법 사용
                            onPressed: () {
                                setState(() => mKind = DataKind.IMAGE);
                            },
                        ),
                        RaisedButton(
                            child: Text('배열'),
                            // 두 번 모두 => 문법 사용. 간단하지만 가독성에서는 어렵다.
                            onPressed: () => setState(() => mKind = DataKind.ARRAY),
                        ),
                    ],
                ),
            ],
        );
    }
}

어찌 된게 뭐하나 할 때마다 이렇게 힘이 드는 건지 모르겠다.
얼핏 보면 그냥 되야 하는데
막상 해보면 절대 그냥 되지 않는다.
이 간단한 걸 하는데 서너 시간 이상 들었다.
예전 같지 않은걸까..?

이전 글에서는 사용자 정보를 1개만 가져왔는데
이번에는 전체에 해당하는 10개를 가져와서 리스트뷰에 출력한다.
모든 데이터를 출력하면 지저분해지는 관계로 이름과 이메일만 보여준다.

이전 예제에서 데이터 하나만 보여주기 때문에 단조로운 화면이었다면
이번 예제는 배열을 보여주기 때문에 스크롤 기능을 제공하는 그럴 듯한 앱이라고 부를 수 있겠다.

우재야!
지금까지 했던 것처럼..
이번에도 아래 코드 안보고 위의 그림처럼 만들어 보자.
해보고 잘 안되면 살짝 보는 걸로.
우리 아들 화이팅!!

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
// http가 있기 때문에 http.get()이라고 쓸 수 있다. 아니면 그냥 get(). 헷갈릴 수 있다.
import 'package:http/http.dart' as http;


void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text('서버/클라이언트')),
        body: MyApp(),
    ))
);

class User {
    int userId;
    String name;
    String email;
    String phone;
    Map<String, dynamic> company;

    User({this.userId, this.name, this.email, this.phone, this.company});
}

Future<List<User>> fetchUsers() async {
    final response = await http.get('https://jsonplaceholder.typicode.com/users');
    
    if (response.statusCode == 200) {
        // 수신 데이터는 사전(Map)의 배열이지만, 정확한 형식은 Iterable 클래스.
        // Map의 형식은 이전 예제에 나온 것처럼 Map<String, dynamic>이 된다.
        final users = json.decode(response.body);

        // Map을 User 객체로 변환.
        // Iterable 객체로부터 전체 데이터에 대해 반복
        List<User> usersMap = [];
        for(var user in users) {        // user는 Map<String, dynamic>
            usersMap.add(User(
                userId: user['id'],
                name: user['name'],
                email: user['email'],
                phone: user['phone'],
                company: user['company'],
            ));
        }
        return usersMap;
    }
    
    throw Exception('데이터 수신 실패!');
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        // Center 위젯이 없으면 데이터를 가져오는 동안 인디케이터가 좌상단에 표시된다.
        return Center(
            child: FutureBuilder(
                future: fetchUsers(),                           // User 배열 반환
                builder: (context, snapshot) {
                    if (snapshot.hasData) {
                        List<User> userArray = snapshot.data;   // 정확한 형식으로 변환
                        return ListView.builder(
                            itemCount: userArray.length,        // 필요한 개수만큼 아이템 생성
                            itemExtent: 100.0,
                            itemBuilder: (context, index) => makeRowItem(userArray[index], index),
                        );
                    } else if (snapshot.hasError) {
                        return Text('${snapshot.error}');
                    }
            
                    // 데이터를 로딩하는 동안 표시되는 인디케이터
                    return CircularProgressIndicator();
                },
            ),
        );
    }

    // 리스트뷰의 항목 생성. idx는 항목의 색상을 달리 주기 위해.
    Widget makeRowItem(User user, int idx) {
        return Container(
            child: Column(
                children: <Widget>[
                    Text(user.name, style: TextStyle(fontSize: 21, color: Colors.white)),
                    Text(user.email, style: TextStyle(fontSize: 21, fontWeight: FontWeight.bold)),
                ],
            ),
            padding: EdgeInsets.only(top: 20.0),
            color: idx % 2 == 1 ? Colors.blueGrey : Colors.orange[300],
        );
    }
}

플러터를 사용하려고 했던 최초의 목적은 서버와의 연동이었다.
딥러닝 서버를 구축하고
스마트폰 앱을 사용해서 결과를 보여주기 위해서.

첫 번째 시간으로 JSON 서비스를 제공하는 서버로부터 데이터를 가져오는 코드를 구성해 봤다.
좋은 코드가 있어 참고했음을 밝힌다.
이곳에서 참고한 코드를 확인할 수 있다.

최종적으로는 여러 개의 데이터를 리스트 형태로 보여준다.
원본 코드에서는 포스트(post)를 가져다 사용했는데
http에서 get과 post라는 단어가 핵심 용어로 사용되기 때문에 일부러 사용자(user)를 선택했다.

총 10개의 데이터 중에서 첫 번째 사용자의 정보는 아래와 같다.
참조했던 코드보다 훨씬 복잡하다. 사전(map) 안에 사전이 존재하는 형태다.

// 첫 번째 사용자 데이터
{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
        }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
    }
},

플러터와 관련된 json 내용은 이곳에서 확인할 수 있다.
fromJson과 toJson 함수를 만드는 방법을 비롯해서 유용한 코드가 많으니 꼭 살펴보기 바란다.
이번 코드에서는 fromJson 생성자만 만들어서 코드를 보기좋게 꾸민다.

서버와의 연동을 위한 처음 코드는 http 모듈을 프로젝트에서 사용할 수 있도록 연동하는 부분이다.
다트에서는 pubspec.yaml 파일에서 연동 작업을 한다.
pubspec.yaml 파일을 열고 http 모듈을 아래 코드처럼 추가한다.
콜론 오른쪽에 아무 숫자도 쓰지 않으면 최신 버전을 가져오라는 뜻이고
지금처럼 명시하면 해당 버전을 갖고 오라는 뜻이다.
^ 기호는 명시한 버전보다 높아야 함을 뜻한다.
추가된 코드는 http가 포함된 한 줄뿐이다.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  http: ^0.12.0

주석을 많이 붙이고
동일하게 동작하는 코드도 여럿 붙였더니.. 많이 길어졌다.

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text('서버/클라이언트')),
        body: MyApp(),
    ))
);

class User {
    final int userId;
    final String name;
    final String email;
    final String phone;
    
    // 사전 안에 포함된 사전. 디코딩을 했기 때문에 문자열이 아니라 사전(map)이 되어야 한다.
    // 이때 사전의 값으로는 여러 가지가 올 수 있기 때문에 dynamic 키워드가 온다.
    // 엣갈리면 앞에 나온 사용자 데이터에서 company 항목을 찾아서 확인해 볼 것.
    final Map<String, dynamic> company;
    
    User({this.userId, this.name, this.email, this.phone, this.company});
    
    // fromJson 생성자. 이 함수를 호출하면 User 객체를 만들 수 있기 때문에 생성자라고 부른다.
    // factory는 클래스 함수로 생성자를 만들 때 사용하는 키워드.
    // 전역 함수처럼 동작하기 때문에 this 키워드를 사용할 수 없다.
    factory User.fromJson(Map<String, dynamic> userMap) {
        return User(
            userId: userMap['id'],
            name: userMap['name'],
            email: userMap['email'],
            phone: userMap['phone'],
            company: userMap['company'],
        );
    }
    
    // 위와 동일한 방법으로 factory 키워드를 생략할 수 있다.
    // User.fromJson(Map<String, dynamic> userMap)
    //     : userId = userMap['id']
    //     , name = userMap['name']
    //     , email = userMap['email']
    //     , phone = userMap['phone']
    //     , company = userMap['company']
}

// json 서버로부터 사용자 데이터 중에서 첫 번째 데이터 1개만 가져옴
Future<User> fetchUser() async {
    // 첫 번째를 가져오기 때문에 주소 마지막에 '1'이 붙어있다.
    // http 프로토콜의 get 방식으로 데이터를 가져온다.
    // get은 가져온다는 뜻이 아나리 어떤 방식으로 데이터를 가져올지를 알려주는 방식(method)을 의미한다.
    final response = await http.get('https://jsonplaceholder.typicode.com/users/1');
    
    // 웹 서버로부터 정상(200) 데이터 수신
    if (response.statusCode == 200) {
        // json 데이터를 수신해서 User 객체로 변환
        final userMap = json.decode(response.body);
        return User.fromJson(userMap);

        // fromJson 생성자를 만들지 않고 직접 User 객체를 생성할 수도 있다.
        // return User(
        //    userId: userMap['id'],
        //    name: userMap['name'],
        //    email: userMap['email'],
        //    phone: userMap['phone'],
        //    company: userMap['company']
        //);
    }
    
    // ok가 아니라면 예외 발생.
    // 실제 상황에서는 데이터 수신에 실패했을 때의 처리를 제공해야 한다.
    // 다시 읽어야 한다던가 빈 데이터 또는 에러를 표시한다던가.
    throw Exception('데이터 수신 실패!');
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        final style = TextStyle(fontSize: 21, height: 2.0);
        return Column(
            children: <Widget>[
                FutureBuilder(
                    future: fetchUser(),
                    builder: (context, snapshot) {
                        if (snapshot.hasData) {
                            // 변수에 저장할 필요없이 Text 위젯에 바로 전달해도 된다.
                            // userId는 int 자료형을 갖기 때문에 문자열 변환이 필요하다.
                            final userId = snapshot.data.userId.toString();
                            final name = snapshot.data.name;
                            final email = snapshot.data.email;
                            final phone = snapshot.data.phone;
                            final company = snapshot.data.company;
                            
                            return Column(
                                children: <Widget>[
                                    Center(child: Text(userId, style: style)),
                                    Center(child: Text(name, style: style)),
                                    Center(child: Text(email, style: style)),
                                    Center(child: Text(phone, style: style)),
                                    Center(child: Text(company['name'], style: style)),
                                    Center(child: Text(company['catchPhrase'], style: style)),
                                    Center(child: Text(company['bs'], style: style)),
                                ],
                            );
                        } else if (snapshot.hasError) {
                            return Text('${snapshot.error}');
                        }
                
                        return CircularProgressIndicator();
                    },
                ),
            ],
        );
    }
}

CircularProgressIndicator 객체의 모양은 이곳에서 확인할 수 있다.
잘 동작하고 있다는 것을 보여줄 때 사용하는 인디케이터의 한 가지이다.

참.. json 서버의 역할을 너무 잘 수행해 주는 JSONPlaceHolder 사이트는 꼭 가봐야 한다.
홈 화면 아래에 내려가면 common으로 제공하는 api 목록을 확인할 수 있다.
앱에서 서버에 접근하기 전에
크롬 등의 브라우저를 사용해서 해당 주소가 잘 동작하는지 먼저 확인해야 한다. 꼭!

플러터는 그만하려고 했는데..
경험 없는 사람들에게는 이런저런 것들도 필요하구나.. 하는 생각이 들었다.
우재, 너 말이야!

간단하게 텍스트 파일을 읽어서 출력할건데..
우재가 프로젝트에서 했던 것처럼 테이블로 표시해 볼께.

플러터 문서에 보면 순서가 정의되어 있는데..
실제로는 누락된 부분이 있어서 한번에 성공하지 못했다. (참고 사이트)

먼저 path_provider 플러그인을 설치하라고 되어 있다.
클릭하면 아래 페이지로 이동한다.

라이브러리를 추가하기 위해서는 pubspec.yaml 파일을 수정해야 한다.
dependencies: 항목을 찾아 다른 라이브러리하고 똑같은 형식으로 입력한다.

  path_provider: 0.5.0+1

pubspec.yaml 파일 상단에는 패키지 명령 몇 가지가 항상 표시된다.
그 중에서 get이나 upgrade 명령을 선택해서
path_provider 라이브러리를 프로젝트에 반영하면 준비 완료.

헐.. 지금까지 설명한 부분은 앱 내부에서 파일을 만들고 접근하는 방법.
미리 만들어 놓은 파일을 읽기 위해서는 사용할 수 없다.
모든 리소스는 패키지로 묶이기 때문에 앞의 코드로는 파일에 접근할 수 없고
플러터에서 제공하는 애셋 관리자를 사용해서 접근해야 한다.

지금 하려고 하는 것처럼 assets 폴더 아래에 파일을 만들었다면
앞의 코드를 사용할 수 없다는 말.
여기서는 '2016_GDP.txt' 파일을 사용한다.

2016_GDP.txt

pubspec.yaml 파일에 아래와 같이 접근할 수 있도록 명시한다.

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
  - assets/2016_GDP.txt

이번 코드에서 가장 어려운 부분은 Future<String>과 FutureBuilder 클래스 사용법인데..
코드에 주석으로 달아놨으니까.. 읽어보고.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('파일 읽기')),
            body: SingleChildScrollView(            // 수직 스크롤 지원
                child: FutureBuilder(
                    future: loadAsset('assets/2016_GDP.txt'),
                    builder: (context, snapshot) {
                        // snapshot은 Future 클래스가 포장하고 있는 객체를 data 속성으로 전달
                        // Future<String>이기 때문에 data는 String이 된다.
                        final contents = snapshot.data.toString();
                        
                        // 개행 단위로 분리
                        final rows = contents.split('\n');

                        var tableRows = <TableRow>[];
                        for(var row in rows) {
                            // 이번 파일에서 구분 문자는 콜론(:)
                            var cols = row.split(':');

                            // 마지막 줄은 빈 줄이라서 컬럼 개수가 3개가 아니다.
                            if(cols.length != 3)
                                continue;

                            // map 함수를 이용해서 문자열 각각에 대해 Text 위젯 생성
                            var widgets = cols.map((s) => Text(s));
                            tableRows.add(TableRow(children: widgets.toList()));
                        }
                        return Table(children: tableRows);
                    },
                ),
            ),
        );
    }

    // assets 폴더 아래에 2016_GDP.txt 파일 있어야 함.
    // AssetBundle 객체를 통해 리소스에 접근.
    // DefaultAssetBundle 클래스 또는 미리 만들어 놓은 rootBundle 객체 사용.
    // async는 비동기 함수, await는 비동기 작업이 종료될 때까지 기다린다는 뜻.
    // 그러나, 함수 자체가 블록되지는 않고 예약 전달의 형태로 함수 반환됨.
    // 따라서 Future 클래스를 사용하기 위해서는 FutureBuilder 등의 특별한 클래스가 필요함.
    Future<String> loadAsset(String path) async {
        return await rootBundle.loadString(path);
        // return await DefaultAssetBundle.of(ctx).loadString('assets/2016_GDP.txt');
    }
}

여기까지만 할까?

왼쪽 그림에서 목록을 보여주고, 하나를 선택하면 오른쪽 그림으로 넘어가는거야.
상단 네비게이션바의 뒤로(<- 화살표) 버튼을 누르면 다시 왼쪽 그림이 나타나지.

왼쪽 그림에서 가운데 흐린 파랑은
출력 결과가 정확하게 가운데 표시된다는 것을 알려줘.
직접 해보면 가운데 오게 하는 것이 잘 안되거든.
왼쪽 그림에서는 표시가 잘 나진 않지만,
조금 스크롤되니까 위아래로 꼭 움직여 봐야 해.
안드로이드 디바이스를 어떤 걸 선택했느냐에 따라 화면 안에 전부 출력될 수도 있는데..
그러면 스크롤은 당연히 안 되겠지?

이번 코드에서 중요한 점은
첫 번째로 데이터 클래스를 만들어서 리스트를 생성하고 상세보기 클래스에 전달하는 방법.
두 번째로 위젯이 많이 중첩돼서 헷갈리지만, 출력물이 화면 가운데 오게 하는 방법.
세 번째로 커스텀 셀(custom cell)이라고 부르는 리스트뷰 항목을 원하는 대로 구성하는 방법.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

// 구조체 스타일의 클래스. 상세보기로 데이터를 넘길 목적으로 생성.
class PageInfo {
    PageInfo(this.image, this.title, this.group);
    
    String image;       // 사진 경로
    String title;       // 본문 설명
    String group;       // 지역 이름
}

class MyApp extends StatelessWidget {
    final infos = [
        PageInfo('images/family_1.jpg', '서핑 후의 달콤한 휴식. 아이서프 샵', '설악'),
        PageInfo('images/family_2.jpg', '보드가 서퍼보다 크다!', '설악'),
        PageInfo('images/family_3.jpg', '우재와 서진, 잘 생겼다!', '설악'),
        PageInfo('images/family_4.jpg', '따뜻한 적이 없던 스키장. 장갑이 필요해!', '지산'),
    ];

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('새로운 기억들')),
            // itemExtent 옵션으로 항목 높이 설정
            // map 함수로 infos에 들어있는 개수만큼 ListTile 객체 생성 (makeRowItem)
            body: ListView(
                itemExtent: 120,
                children: infos.map((info) => makeRowItem(context, info)).toList(),
            ),
        );
    }

    Widget makeRowItem(BuildContext ctx, PageInfo info) {
        return Center(child: Container(
                color: Colors.lightBlue[100],       // 출력물이 항목 가운데 오는지 확인하기 위한 용도
                child: ListTile(
                    // 셀의 왼쪽 영역. 오른쪽을 가리키는 trailing도 있지만, 여기서는 사용 안함
                    leading: Image.asset(
                        info.image, width: 100, height: 100, fit: BoxFit.cover),
                    // 본문 영역에 Row나 Column 위젯을 통한 여러 개의 위젯 전달 가능
                    title: Row(
                        children: <Widget>[
                            Expanded(           // 자식 위젯이 나머지 전체를 차지하도록 확장
                                child: Text(
                                    info.title,
                                    style: TextStyle(fontSize: 19, color: Colors.blueGrey)),
                            ),
                            Container(          // 답답해 보이지 않도록 패딩을 주기 위해 사용
                                child: Text(
                                    info.group,
                                    style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black54)),
                                padding: EdgeInsets.only(left: 12.0, right: 12.0),
                            ),
                        ],
                    ),
                    // 특정 셀을 선택하면 다음 화면으로 현재 셀의 데이터 전달하면서 이동
                    onTap: () {
                        Navigator.push(ctx,
                            MaterialPageRoute<void>(builder: (BuildContext context) => Detail(info: info))
                        );
                    },
                ),
            ),
        );
    }
}

// 상세보기 화면 클래스
// 실제로는 더 많은 데이터가 전달되어야 하지만, 여기서는 3가지만 사용.
class Detail extends StatelessWidget {
    // key는 부모 클래스에서 사용하는 기본 옵션
    Detail({Key key, this.info}) : super(key: key);
    final PageInfo info;

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text(info.group)),
            body: SingleChildScrollView(        // 없으면, 화면을 벗어났을 때 볼 수 없음 (스크롤 지원)
                child: Column(
                    children: <Widget>[
                        Container(
                            child: Center(
                                child: Text(
                                    info.title,
                                    style: TextStyle(fontSize: 21.0, color: Colors.black87),
                                ),
                            ),
                            padding: EdgeInsets.all(20.0),
                        ),
                        Container(
                            child: Image.asset(info.image, fit: BoxFit.contain),
                            padding: EdgeInsets.all(10.0),
                        ),
                    ],
                ),
            ),
        );
    }
}

다 했어?
그러면 간단한 프로젝트를 시작해야 할테고
잘 안되는 것들은 꼭 질문하기.
명심할 것은 바로 질문해서는 안 되고 조금이라도 고민한 후에 질문하기.

우재가 시행착오를 잘 이겨내고
그럴듯한 스마트폰 앱으로 친구들한테 자랑할 날을 기다리면서.
아빠가!!

무제한 목록보기를 구현했다.
제목으로는 끝이 없다는 뜻으로 '무한리필'!
쩔지 않니, 우재야?

왼쪽은 앱 실행 후 첫 번째 화면, 오른쪽은 여러 페이지를 이동한 후의 화면.
출력 문자열은 양쪽에 3글자 영어 단어가 있고, 가운데는 항목 순서를 표시했지.
단어 10개 중에서 난수로 뽑았기 때문에 중복될 수 있고, 양쪽 그림 모두에서 중복된 패턴이 보인다. ㅎ

이번 코드에서 중요한 것은
여러 페이지를 넘어설 만큼 개수가 많을 때 ListTile 객체를 생성하는 방법이야.
3개만 생성한다면 한번에 생성할 수도 있지만
너무 많아지면 계속해서 나열할 수는 없기 때문에
반복적으로 필요할 때마다 생성할 수 있는 구성이 필요해.

ListView 클래스의 builder 생성자를 사용해서 리스트뷰 위젯을 만들면서
itemBuilder 옵션으로 ListTile 객체를 생성하는 방법을 알려주는 게 핵심 중의 핵심!

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
    // 단어 목록으로부터 난수가 가리키는 위치의 단어를 보여주기 위한 변수 및 함수. 42는 seed.
    final rand_gen = Random(42);
    final words = ['ten', 'day', 'sky', 'fat', 'gym', 'run', 'ace', 'red', 'zen', 'sun'];

    String randomWord() => words[rand_gen.nextInt(words.length)];
    String capitalize(String s) => s[0].toUpperCase() + s.substring(1);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('무한리필')),
            body: ListView.builder(
                itemBuilder: (context, index) {
                    final first  = capitalize(randomWord());    // 첫 글자가 대문자인 단어 생성
                    final second = capitalize(randomWord());
                    final disp_text = '$first  $index  $second';
                    
                    return ListTile(
                        title: Center(                          // 항목 가운데 배치
                            child: Text(
                                '$first  $index  $second',      // 원하는 형태로 조합
                                style: TextStyle(               // 모든 단어를 같은 스타일로 처리
                                    fontSize: 21,
                                    fontWeight: FontWeight.bold,
                                ),
                            ),
                        ),
                        onTap: () {
                            showDialog(                         // 초간단 경고창
                                context: context,
                                builder: (BuildContext ctx) => AlertDialog(title: Text(disp_text))
                            );
                        },
                    );
                }
            ),
        );
    }
}

문자열에 포함된 단어 각각에 대해 다른 스타일을 적용하고 싶어졌어.
갑자기 그런 건 아니고
프로젝트를 하다 보면 그럴 경우가 많거든.
예전에는 문자열 3개를 Text 위젯으로 따로 만들어서 화면에서만 하나인 것처럼 했는데..
지금은 어렵지 않게 개별적인 스타일을 적용할 수 있게 라이브러리에서 지원을 하고 있어.

양쪽 영어 단어는 짙은 파랑, 가운데 순서는 빨강.
그리고 모든 단어는 폰트 크기를 키웠고 굵은 글씨로 수정했어.

앞쪽 코드에서 ListTile에 들어갈 title 옵션만 수정하면 돼.
TextSpan 위젯은 반드시 RichText 위젯의 자식으로 들어가야 하고
공통 스타일과 개별 스타일을 어떻게 적용하는지만 보면 돼.

참.. TextSpan 위젯 안에 TextSpan 위젯이 들어가는 거 중요하다!

title: Center(                          // 항목 가운데 배치
    child: RichText(
        text: TextSpan(                 // Text 확장
            style: TextStyle(           // 모든 자식에 대한 공통 스타일
                fontSize: 21,
                color: Colors.indigo,
                fontWeight: FontWeight.bold,
            ),
            children: [
                TextSpan(text: first + '  '),   // 1번 자식
                TextSpan(                       // 2번 자식
                    text: index.toString(),
                    style: TextStyle(           //    개별 스타일
                        color: Colors.red
                    ),
                ),
                TextSpan(text: '  ' + second),  // 3번 자식
            ],
        ),
    ),
),

우재야.. 이제 플러터의 끝이 다가오고 있다.
아빠가 기본적인 내용을 열심히 만들기는 했는데
여기에 살을 붙여서 응용하는 것은 많이 힘들거야.
근데.. 그건 아빠가 해줄 수가 없어.
인생이란 늘 한결 같아서 고생하지 않으면 가질 수가 없었어.
마지막까지.. 파이팅!!

항목이 3개 있는 리스트뷰 위젯을 만들었다.
왼쪽은 처음 화면, 오른쪽은 '사진' 항목을 눌러서 경고창이 떴을 때의 화면.
내용이 별거 없는 만큼 리스트뷰가 동작하는 방식을 잘 보여줄 수 있게 만들었어.

ListView 클래스를 만드는 방법에는 여러 가지가 있지만
가장 쉬운 방법은 그냥 기본 생성자를 통해 만드는 거야.
리스트뷰 위젯 만들고 그 안에 필요한 만큼 리스트 항목, 여기서는 ListTile 클래스가 되지.

이번 코드에서는 개수가 많지 않기 때문에 코드가 선명하게 보이는 거고
다음 예제에서 항목의 개수를 늘려서 여러 페이지에 나타나도록 해 볼거야.

ListTile 클래스에서 가장 중요한 것은 onTap 매개변수.
나를 눌렀으니까 그에 따른 뭔가를 해야겠지.
여기서는 간단하게 항목별로 다른 문자열을 출력하고 있어.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('목록 보기')),
            body: ListView(                             // 1. 리스트뷰 생성하고
                children: <Widget>[
                    ListTile(                           // 2. 리스트 항목 추가하면 끝!
                        leading: Icon(Icons.map),
                        title: Text('지도'),
                        onTap: () => _showDialog(context, '지도'),
                    ),
                    ListTile(
                        leading: Icon(Icons.photo),
                        title: Text('사진'),
                        onTap: () => _showDialog(context, '사진'),
                    ),
                    ListTile(
                        leading: Icon(Icons.phone),
                        title: Text('전화'),
                        enabled: false,                             // 비활성
                        onTap: () => _showDialog(context, '전화'),
                    ),
                ],
            ),
        );
    }

    // API에 있는 showDialog 함수와 이름이 같아서 밑줄(_) 접두사(private 함수)
    void _showDialog(BuildContext context, String text) {
        // 경고창을 보여주는 가장 흔한 방법.
        showDialog(
            context: context,
            builder: (BuildContext ctx) {
                return AlertDialog(
                    title: Text('선택 완료!'),
                    content: Text('$text 항목을 선택했습니다.'),
                    // 주석으로 막아놓은 actions 매개변수도 확인해 볼 것.
                    // actions: <Widget>[
                    //     FlatButton(child: Text('확인'), onPressed: () => Navigator.pop(context)),
                    // ],
                );
            }
        );
    }
}

showDialog 함수는 경고창을 표시하는 AlertDialog 위젯을 비롯해서
여러 가지 형태의 대화상자를 보여주는 가장 쉬운 방법이야.
showDialog 함수를 통하지 않으면 화면에 아무 것도 표시되지 않아.

이번에는 가장 일반적인 형태로 사용하는 탭바 인터페이스를 살펴보자.

탭바 인터페이스의 구현은 TabController 클래스가 담당한다.
탭바는 보통 화면 하단에 위치한다.
사실 위쪽에 탭바가 있으면 '바(bar)'를 붙이지 않고 그냥 탭(tab)이라고 부른다.

탭바 인터페이스로 구현하는 이유는
탭에 연결된 화면이 완전히 달라지기 때문이다.
각각의 화면은 일부 연관되어 있을 수도 있지만, 전혀 상관없는 경우가 많다.
그래서 이번 예제에서도 단순하긴 하지만
완벽하게 다른 화면으로 각각의 화면을 구성했다.

탭바의 아이콘은 형식적으로 붙인 것이고
제목에 있는 색상에 맞게 화면 배경색을 처리했다.

각각의 화면은 보통 클래스로 구현을 한다.
색상에 맞게 Red, Green, Blue 클래스를 간단하게 만들었다.

배경색을 처리하기 위해 Container 클래스로 감쌌고
Card 위젯의 여백을 흉내내기 위해 maring 옵션도 일부 줬다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyTabs()));

// TabController 객체를 멤버로 만들어서 상태를 유지하기 때문에 StatefulWidget 클래스 사용
class MyTabs extends StatefulWidget{
    @override
    MyTabsState createState() => MyTabsState();
}

// SingleTickerProviderStateMixin 클래스는 애니메이션을 처리하기 위한 헬퍼 클래스
// 상속에 포함시키지 않으면 탭바 컨트롤러를 생성할 수 없다.
// mixin은 다중 상속에서 코드를 재사용하기 위한 한 가지 방법으로 with 키워드와 함께 사용
class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
    // 컨트롤러는 TabBar와 TabBarView 객체를 생성할 때 직접 전달
    TabController controller;
    
    // 객체가 위젯 트리에 추가될 때 호출되는 함수. 즉, 그려지기 전에 탭바 컨트롤러 샛성.
    @override
    void initState(){
        super.initState();
        
        // SingleTickerProviderStateMixin를 상속 받아서
        // vsync에 this 형태로 전달해야 애니메이션이 정상 처리된다.
        controller = TabController(vsync: this, length: 3);
    }
    
    // initState 함수의 반대.
    // 위젯 트리에서 제거되기 전에 호출. 멤버로 갖고 있는 컨트롤러부터 제거.
    @override
    void dispose(){
        controller.dispose();
        super.dispose();
    }
    
    @override
    Widget build(BuildContext context){
        return Scaffold(
            appBar: AppBar(title: Text('교통 수단')),
            body: TabBarView(
                controller: controller,                     // 컨트롤러 연결
                children: [Red(), Green(), Blue()]
            ),
            bottomNavigationBar: Container(
                child: TabBar(
                    controller: controller,                 // 컨트롤러 연결
                    tabs: [
                        // 아이콘은 글자 수 같은 걸로 선택. 의미 없음. 제목에 들어간 색상은 중요.
                        Tab(icon: Icon(Icons.card_travel), text: '빨강'),
                        Tab(icon: Icon(Icons.donut_small), text: '초록',),
                        Tab(icon: Icon(Icons.table_chart), text: '파랑'),
                    ]
                ),
                color: Colors.blueGrey,
            ),
        );
    }
}

// Card 위젯 구현
class Red extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return Card(color: Colors.red);
    }
}

// Text 위젯 구현
class Green extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return Container(
            child: Center(
                child:Text('GREEN', style: TextStyle(fontSize: 31, color: Colors.white))
            ),
            color: Colors.green,
            margin: EdgeInsets.all(6.0),
        );
    }
}

// Icon 위젯 구현
class Blue extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return Container(
            child: Center(
                child: Icon(Icons.table_chart, size: 150, color: Colors.white),
            ),
            color: Colors.blue,
            margin: EdgeInsets.all(6.0),
        );
    }
}

탭바 인터페이스는 각각의 화면을 개별적인 클래스로 처리하기 때문에
당연하게 개별 파일에 저장하게 된다.
앞의 예제를 다중 파일 형태로 수정해 보자.

1.
Red, Green, Blue 클래스를 잘라내서 my_screen.dart 파일을 만들어서 붙여넣자.
my_screen.dart 파일의 꼭대기에는 당연히 material.dart 파일 import문이 있어야 한다.

2.
main.dart 파일에 아래 코드를 추가한다.
다른 파일과 연동할 때는 아래처럼 사용한다. 점(dot)은 현재 폴더를 가리키는 문법이다.

import './my_screen.dart' as my_screen;

3.
TabBarView 객체를 생성하는 children 옵션을 아래처럼 수정한다.
참조하려는 클래스가 현재 파일이 아니라 my_screen 파일에 있다고 알려준다.

children: [
    my_screen.Red(),
    my_screen.Green(),
    my_screen.Blue(),
]

탭바와 화면 중앙에 아이콘을 추가했더니
앱의 품질이 매우 좋아진 것처럼 느껴지는 것은 나만의 착각일까?

역시 주석을 꼼꼼하게 달았다.
이번 코드에서 주의 깊게 볼 것은 아이콘 사용은 아니다.
그건 너무 쉬우니까.

구조체 같은 Choice 클래스를 만들었고
왜 만들었는지에 대한 이해를 할 수 있다면 얼마나 좋을까?
주석에 있는 것처럼 단순하게 두 군데에서 사용하기 위해서라고 생각할까?

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: TabBarSample()));

// 아이콘과 제목을 함께 보여주기 위해 데이터만 포함하는 구조체 스타일의 클래스 생성
class Choice {
    Choice(this.text, this.icon);
    final String text;
    final IconData icon;

    // 매개변수를 전달할 때 {}가 있다면 매개변수 이름을 생략할 수 없다.
    // Choice({this.title, this.icon});
}

class TabBarSample extends StatelessWidget {
    // 탭바와 탭바뷰 양쪽에서 사용하기 위한 공통 데이터 리스트.
    // Choice 생성자에 {}를 사용하지 않았기 때문에 매개변수 이름이 없다.
    final choices = [
        Choice('PLANE', Icons.flight),
        Choice('CAR',   Icons.directions_car),
        Choice('BIKE',  Icons.directions_bike),
        Choice('BOAT',  Icons.directions_boat),
        Choice('BUS',   Icons.directions_bus),
        Choice('TRAIN', Icons.directions_railway),
        Choice('WALK',  Icons.directions_walk),
    ];
    
    @override
    Widget build(BuildContext context) {
        return DefaultTabController(
            length: choices.length,
            child: Scaffold(
                appBar: AppBar(
                    title: Text('교통 수단'),
                    bottom: TabBar(
                        tabs: choices.map((Choice choice) {
                            return Tab(
                                text: choice.text,
                                icon: Icon(choice.icon),    // 이전 코드와 다른 부분
                            );
                        }).toList(),
                        isScrollable: true,
                    ),
                ),
                body: TabBarView(
                    // map과 toList 함수를 연결해서 화면 리스트 전달
                    children: choices.map((Choice choice) {
                        // 문자열과 아이콘을 모두 포함하는 위젯 객체 생성
                        // 이전 코드에서는 Text 위젯 하나만 사용했었다. 코드가 많아 클래스로 분리.
                        return ChoiceCard(
                            // 생성자에서 {}를 사용했기 때문에 text와 icon 매개변수 이름 사용 필수
                            text: choice.text,
                            icon: choice.icon,              // 이전 코드와 다른 부분
                        );
                    }).toList(),
                ),
            ),
        );
    }
}

class ChoiceCard extends StatelessWidget {
    // 매개변수 주변에 {}가 있기 때문에 text와 icon이라는 매개변수 이름을 함께 사용해야 한다.
    const ChoiceCard({Key key, this.text, this.icon}) : super(key: key);
    
    final String text;
    final IconData icon;
    
    @override
    Widget build(BuildContext context) {
        // 아이콘과 텍스트 양쪽에서 사용하기 위해 별도 변수로 처리
        final TextStyle textStyle = Theme.of(context).textTheme.display3;
        return Card(
            child: Column(
                children: <Widget>[
                    // 아이콘이 위쪽, 문자열이 아래쪽.
                    Icon(icon, size: 128.0, color: textStyle.color),
                    Text(text, style: textStyle),
                ],
                mainAxisAlignment: MainAxisAlignment.center,
            ),
            color: Colors.green,
            margin: EdgeInsets.all(12),
        );
    }
}

클래스 없이 만들 수 있는 방법이 있지 않을까?
일단 클래스와 같은, 크기가 작아도 클래스니까 코드가 복잡해 진다.
클래스를 없애보자!

고생 엄청 했다.
몇 시간 코딩하고 나서 알았다.
생각 좀 하고 코딩했어야 하는데.. 일단 코딩하고 보는 성격이라..
우재야! 아빠가 급한 성격이니?

문제는 Card 클래스를 사용해서 화면 중앙에 탭의 내용을 다시 한번 출력하려는 것이다.
그러니 두 군데에 나올 수밖에 없다.
보통은 전혀 그럴 일이 없기 때문에 실제 상황에서는 Choice 같은 클래스는 사용하지 않을 것이다.
항상 그랬기 때문에 미처 감지하지 못했다. 늘 하던 방식으로 생각하는 바람에.

Card 클래스는 아래 그림과 같은
Material 클래스에서 제공하는 많지 않은 데이터를 보여주는 위젯이다.

이번 예제는 플러터에서 가져왔다.
좋은 예제들이 많으니까 꼭 둘러보기 바란다.

스마트폰에서 네비게이션은 정해진 순서에 따라
깊이를 타고, 다시 말해 안쪽으로 깊숙하게 들어가는 인터페이스를 말한다.
탭은 버튼처럼 누를 수 있는 영역이고
각각의 탭에는 자신만의 고유한 화면(페이지)이 연결되어 있다.
보고 싶은 화면의 탭을 눌러서 정해지지 않는 화면으로 이동하는 인터페이스가 탭바이다.

탭바의 위치는 상단이나 하단, 어느 쪽에도 연결할 수 있다.
첫 번째 예제로는 상단에 탭바를 연결했다.
왼쪽은 최초 실행한 모습이고, 오른쪽은 BOAT 탭을 눌렀을 때의 모습이다.
오른쪽 끝에 보면 보이지 않던 WALK 탭이 나타난 것을 알 수 있다.
탭의 갯수가 많을 경우 옵션에 따라 자동 스크롤 여부를 결정할 수 있다.

정말 단순한 코드.
멋대가리 없이 문자열로만 탭바를 구성한 코드.

탭바 인터페이스에서 중요한 것은 탭과 보여줄 화면의 연결.
컨트롤러의 역할은 다양하겠지만 이들을 자동 연결하는 것이 핵심.
DefaultTabController 클래스는 TabBar와 TabBarView 객체를 연결하는 가장 쉬운 방법 되겠다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: TabBarSample()));

class TabBarSample extends StatelessWidget {
    final choices = ['PLANE', 'CAR', 'BIKE', 'BOAT', 'BUS', 'TRAIN', 'WALK'];
    
    @override
    Widget build(BuildContext context) {
        // 가장 간단하고 쉽게 사용할 수 있는 기본 탭바 컨트롤러. 탭바와 탭바뷰 연결.
        return DefaultTabController(
            length: choices.length,
            child: Scaffold(
                appBar: AppBar(
                    title: Text('교통 수단'),
                    bottom: TabBar(
                        // map 함수는 리스트의 요소를 하나씩 전달한 결과로 
                        // Iterable 객체를 생성하기 때문에 toList 함수로 변환
                        tabs: choices.map((String choice) {
                            // text는 탭바에 표시할 내용. 지금은 아이콘 없이 문자열만 사용.
                            return Tab(text: choice);
                        }).toList(),
                        isScrollable: true,         // 많으면 자동 스크롤
                    ),
                ),
                // 탭바와 연결된 탣바뷰 생성.
                // 탭바 코드와 똑같이 map 함수로 리스트 생성
                body: TabBarView(
                    children: choices.map((String choice) {
                        return Center(
                            child: Text(
                                choice,
                                style: TextStyle(fontSize: 31),
                            ),
                        );
                    }).toList(),
                ),
            ),
        );
    }
}

어휴.. 드디어 여기까지 왔다!
시간이 무한정 있는 것은 아니니까..
우재가 스마트폰 앱을 만들려면 최소 화면 전환까지는 해야 하고
추가로 목록 보여주기까지하면 퍼펙트!

일단 가장 간단한 네비게이션을 이용한 화면 전환부터 해보자.
스마트폰에서 네비게이션은 새롭게 표시할 화면을 기존 화면 위에 순서대로 쌓는 개념을 말해.
이때 화면은 영역 일부를 가리킬 수 없고 반드시 전체 화면이어야 하고.
그래서 이전에 있던 화면은 새로운 화면에 가려서 전혀 볼 수가 없게 되는거야.

왼쪽 화면(페이지)에서 버튼을 누르면 오른쪽 화면으로 이동하고,
"처음 화면으로 돌아가기" 버튼을 누르면 왼쪽 화면으로 돌아가게 만들었어.
Navigation 클래스를 사용한 네비게이션의 장점은
다음 화면으로 넘어갈 때는 버튼을 직접 구현해야 하지만,
이전 화면으로 돌아갈 때는 상단 제목줄 왼쪽에 있는 화살표 버튼을 눌러도 돼.
그러니까 오른쪽 화면에서 "처음 화면으로 돌아가기" 버튼은 만들지 않아도 되는거지.
그래도 나중에는 직접 구현해야 할 때가 있기 때문에 아빠는 구현을 한 거야.

아래 코드를 볼 때 중요한 점 첫 번째!
First와 Second 클래스는 거의 똑같은 코드라는 점.
First 위젯에서는 Second 위젯으로 이동할 거니까 다음 화면을 넣어야 하고
Second 위젯에서는 First 위젯으로, 다시 말해 Second 위젯을 제거할 거니까 현재 화면을 없애는 코드만 달라.

두 번째는 Scafold 클래스가 각각의 화면 클래스에 들어가야 해.
그래야 상단 제목줄부터 시작하는 전체 화면을 쉽게 구성할 수 있으니까.

세 번째는 두 번째와 같은 이유로
main 함수에서 Scafold 객체를 만들지 않아.
각각의 화면에 들어갔으니까 만들면 안되는 거지.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '네비게이션',
        home: First(),
    ));
}

class First extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('첫 번째')),
            body: Center(
                child: RaisedButton(
                    child: Text('두 번째 화면으로 이동', style: TextStyle(fontSize: 21)),
                    color: Colors.blue,
                    onPressed: () {
                        // push에 전달되는 두 번째 매개변수는 Route<T> 클래스.
                        Navigator.push(context,
                            MaterialPageRoute<void>(builder: (BuildContext context) {
                                return Second();
                            })
                        );

                        // 화살표 문법 적용
                        // Navigator.push(context,
                        // MaterialPageRoute<void>(builder: (BuildContext context) => Second())
                        // );
                        
                        // 위와 같은 코드. of 메소드 호출이 불편하다.
                        // Navigator.of(context).push(
                        // MaterialPageRoute<void>(builder: (BuildContext context) => Second())
                        // );
                    },
                ),
            ),
        );
    }
}

class Second extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('두 번째')),
            body: Center(
                child: RaisedButton(
                    child: Text('처음 화면으로 돌아가기', style: TextStyle(fontSize: 21)),
                    color: Colors.green,
                    onPressed: () {
                        Navigator.pop(context);
                        
                        // 위와 같은 코드
                        // Navigator.of(context).pop();
                    },
                ),
            ),
        );
    }
}

로그인이 뭐가 어려울까?
너무 쉽게 생각했고 코드를 구성하는 과정에서 많은 것을 배웠다.
우재, 너에게 다 알려주마!!

화면이 조금 이상해 보일 수도 있지만, 아빠가 의도한 화면이니까.. 이해하고.
아이디와 비밀번호를 입력 받아서 로그인 버튼을 눌렀을 때
일치하면 초기화를 시켜서 다시 입력을 받도록 했고
일치하지 않으면 스낵바를 통해 틀렸다고 알려주도록 했지.

계속 그랬던 것처럼
아빠 코드를 보지 않고 직접 구현할 수 있으면 좋겠는데..
어쩔 수 없어 코드를 보고 이해했다면
나중에라도 이번 화면을 직접 구현해 봐야 해. 알았지?

설명할 게 너무 많아서 코드에 주석을 달아야 했다.
중복되는 코드가 많아서 기본 함수인 makeText와 makeTextField를 만들었고
이들 함수를 사용하는 makeRowContainer 함수까지 총 3개의 함수를 사용했다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '로그인',
        home: Scaffold(
            appBar: AppBar(title: Text('로그인')),
            body: Login(),
        ),
    ));
}

class Login extends StatefulWidget {
    @override
    State createState() => LoginState();
}

class LoginState extends State<Login> {
    String userName = '';
    String password = '';
    
    @override
    Widget build(BuildContext context) {
        return Center(
            child: Column(
                children: <Widget>[
                    makeRowContainer('아이디', true),
                    makeRowContainer('비밀번호', false),
                    Container(child: RaisedButton(
                            child: Text('로그인', style: TextStyle(fontSize: 21)),
                            onPressed: () {
                                // 사용자 이름과 비밀번호가 일치한다면!
                                if(userName == 'dart' && password == 'flutter') {
                                    // 세터로 초기화를 했기 때문에 build 함수 자동 호출하면서 
                                    // 아이디와 비밀번호 텍스트필드가 빈 문자열로 초기화된다.
                                    setState(() {
                                        userName = '';
                                        password = '';
                                    });
                                }
                                else
                                    Scaffold.of(context)
                                        ..removeCurrentSnackBar()
                                        ..showSnackBar(SnackBar(content: Text('일치하지 않습니다!!')));
                            }
                        ),
                        margin: EdgeInsets.only(top: 12),
                    ),
                ],
                mainAxisAlignment: MainAxisAlignment.center,
            ),
        );
    }
    
    Widget makeRowContainer(String title, bool isUserName) {
       return Container(
            child: Row(
                children: <Widget>[
                    makeText(title),
                    makeTextField(isUserName),
                ],
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
            ),
            padding: EdgeInsets.only(left: 60, right: 60, top: 8, bottom: 8),
        );
    }
    
    // Cascade 문법 사용. 주석으로 막은 코드보다 ..을 사용한 한 줄 코드가 훨씬 낫다.
    // Cascade 문법은 아래에서 따로 설명한다.
    Widget makeText(String title) {
        // var paint = Paint();
        // paint.color = Colors.green;
        
        return Text(
            title,
            style: TextStyle(
                fontSize: 21,
                background: Paint()..color = Colors.green,
                // background: paint,
            ),
        );
    }
    
    Widget makeTextField(bool isUserName) {
        // TextField 위젯의 크기를 변경하고 padding을 주려면 Container 위젯 필요.
        // TextField 독자적으로는 할 수 없음.
        return Container(
            child: TextField(
                // TextField 클래스는 입력 내용을 갖고 있지 않고, TextEditingController 클래스에 위임.
                // 입력 내용에 접근할 때는 controller.text라고 쓰면 된다.
                // 여기서는 로그인에 성공했을 때 초기화를 위한 용도로만 사용한다. 아래처럼 초기값을 줄 수도 있다.
                // controller: TextEditingController()..text = '플러터',
                controller: TextEditingController(),
                style: TextStyle(fontSize: 21, color: Colors.black),
                textAlign: TextAlign.center,
                // 테두리 출력. enabledBorder 옵션을 사용하지 않으면 변경 불가.
                decoration: InputDecoration(
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Colors.red,
                            width: 2.0
                        ),
                    ),
                    contentPadding: EdgeInsets.all(12),
                ),
                onChanged: (String str) { 
                    // 입력이 변경될 때마다 갱신이 필요하지 않기 때문에 세터 사용 안함
                    // 아이디와 비밀번호 중에서 하나를 갱신한다.
                    if(isUserName)
                        userName = str;
                    else
                        password = str;
                },
            ),
            // TextField 위젯의 크기를 설정하려면 Container 위젯을 부모로 가져야 한다.
            // 컨테이너의 크기가 텍스트필드의 크기가 된다.
            width: 200,
            padding: EdgeInsets.only(left: 16),
        );
    }
}

텍스트필드에 테두리를 넣는 코드도 힘들었고
아무리 해도 테두리 색상이 바뀌지 않는 것도 힘들었고.
모든 시행착오를 알려주고 싶은데.. 그건 우재가 직접 해야겠다.
너무 길어져서 알려줘도 알려주지 않은 것만 못하다.

앞에서 사용한 double dot(..) 문법은 다트에서 Cascade notation이라고 불러.
아래 두 개의 코드는 같은 코드이고, 그냥 봐서는 double dot의 장점이 없어 보이겠지?

// 1. 일반적인 코드
var button = querySelector('#confirm');
button.text = 'Confirm';
button.classes.add('important');

// 2. double dot을 사용해서 축약한 코드
querySelector('#confirm')
    ..text = 'Confirm'
    ..classes.add('important')

1번 코드는 별도의 변수를 선언해야 하고, 2번 코드는 선언이 필요없다.
변수를 선언한다는 것은 기존 코드와 유기적으로 연동할 수 없다는 것을 뜻해.
앞에 나온 메인 코드에서도 추가 변수를 사용한 불편한 코드를 주석으로 막아놓았다. 봤지?

왜 굳이 다른 방법을 찾는 것일까?
앞에서 보여준 것이 정석이라고 생각되지만, 가끔은 정석만으로 코딩할 수 없으니까.
플러터가 구성하는 위젯 트리에서 직접 텍스트필드를 찾으면 더 쉽지 않을까?

그래서 해봤는데.. 번거로운 것들이 너무 많아서 비추.
다만 아래 코드는 프로젝트 규모가 커졌을 때 활용할 수 있기 때문에 보여주는 걸로.

웃긴데.. 아래 코드 만드는데 4시간 정도 걸렸네.
다트에 대한 자료를 봐도.. 뭐가 뭔지 구분도 안 되고..
아직까지는 범용적으로 사용하는 언어가 아니라는 건 분명히 배웠다.

참, 아래 코드는 버튼의 onPressed 함수에 대해서만 보여준다.
나머지 코드에서는 세터 변수로 사용하는 userName과 password만 삭제하면 끝.

onPressed: () {
    // 위젯 검색. TextField 위젯이 많을 경우 추가 검색 필요.
    // byType 함수로 찾고, evaluate 함수로 찾은 위젯 반환.
    // byType 함수의 반환값 자료형은 Finder 클래스. evaluate 함수는 Iterable<> 반환.
    // 모든 위젯의 루트 클래스에 해당하는 Element 클래스가 요소의 타입이기 때문에 변환 필요.
    var finds_1 = find.byType(TextField).evaluate();
    var finds_2 = finds_1.cast<StatefulElement>();
    // 런타임 객체가 위젯을 감싸고 있는 형태라서 widget 속성을 사용해서 실제 위젯을 가져옴
    var finds_3 = finds_2.map((w) => w.widget);
    // Iterable<> 자료형을 리스트로 변환해서 [0]과 같은 정수 인덱스 사용함
    var finds_4 = finds_3.cast<TextField>().toList();

    // 상위 클래스를 하위 클래스로 변환하는 다운캐스팅(downcasting)이기 때문에 에러. 업캐스팅만 가능.
    // var finds_2 = finds_1 as List<StatefulElement>;
    // var finds_4 = finds_3 as List<TextField>;

    // 이전 코드에서는 userName이 문자열이었지만 여기서는 TextField 위젯
    var userName = finds_4[0];
    var password = finds_4[1];

    // 텍스트필드의 입력 데이터에 접근하려면 controller 속성 사용
    if(userName.controller.text == 'dart' && password.controller.text == 'flutter') {
        // 입력 데이터를 직접 바꾸면 화면에서도 변경되기 때문에 세터(setState) 사용하지 않음
        userName.controller.text = '';
        password.controller.text = '';
    }
    else
        Scaffold.of(context)
            ..removeCurrentSnackBar()
            ..showSnackBar(SnackBar(content: Text('일치하지 않습니다!!')));
}

find 객체는 플러터에서 제공하는 최상위 상수 객체로 미리 정의되어 있다.
사용하려면 아래처럼 import 추가할 것.
목적은 해당 객체가 위젯 트리에 잘 들어갔는지 검사(test)하기 위한 용도로 제작된 것처럼 보인다.
아마도 겸사겸사 만들었겠지..

import 'package:flutter_test/flutter_test.dart';

사용자로부터의 입력은 늘 액션을 동반하기 때문에 좀더 어렵다.
그래도 플러터라서 아이폰과 안드로이드에 비해서는 훨씬 쉽다.
다만 새로운 것을 익혀야 하는 것이 번거롭지만
해야 하기 때문에 하는 거라고 생각하자. 하지 않을 수 있는 방법이 없다.

TextField 클래스를 사용해서 입력 필드를 만들고
입력하는 글자를 아래쪽의 Text 위젯에 출력하는 코드를 구성했다.
키보드는 입력 초점이 TextField 위젯에 가면 자동으로 올라오니까 신경쓰지 않아도 된다.
입력 초점을 잃으면 자동으로 내려가는 것까지 포함된다.

버튼은 상태를 갖지 않는 StatelessWidget 클래스 계열이고
텍스트 필드와 같은 값이 바뀔 수 있는 것들은 StatefulWidget 클래스 계열이다.
StatefulWidget 클래스를 사용하기 때문에 State<> 클래스를 상속한 클래스까지 조금 번거로운 느낌이 든다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '텍스트 입력',
        home: Scaffold(
            appBar: AppBar(title: Text('텍스트 입력'),),
            body: InputSample(),
        ),
    ));
}

class InputSample extends StatefulWidget {
    @override
    State createState() => InputSampleState();
}

class InputSampleState extends State<InputSample> {
    String inputs = '';
    
    @override
    Widget build(BuildContext context) {
        return Center(
            child: Column(
                children: <Widget>[
                    Container(
                        child: TextField(
                            style: TextStyle(fontSize: 32, color: Colors.red),
                            textAlign: TextAlign.center,
                            decoration: InputDecoration(hintText: '입력해 주세요'),
                            onChanged: (String str) {
                                setState(() => inputs = str);
                            },
                        ),
                        padding: EdgeInsets.only(top: 10, bottom: 10),
                        width: 300,
                    ),
                    Container(
                        child: Text(
                            inputs,
                            style: TextStyle(fontSize: 32),
                            textAlign: TextAlign.center,
                        ),
                        padding: EdgeInsets.only(top: 10, bottom: 10),
                        width: 300,
                    ),
                ],
                mainAxisAlignment: MainAxisAlignment.center,
            ),
        );
    }
}

첫 번째 줄에 만든 Inputs 변수가 위젯들의 상태를 결정한다.
상태를 결정한다는 것은 위젯이 보여주려고 하는 상태(문자열)를 담고 있다는 뜻이다.
때문에 항상 동기화가 되어야 한다.
inputs 변수의 값과 위젯의 값이 다르면 사용자는 엄청난 혼란에 빠지게 되니까.

TextField 클래스의 옵션에 특별한 것이 일부 있다.
InputDecoration 클래스를 통해 입력해야 할 내용을 설명할 수 있고
입력한 내용이 바뀔 때마다 자동으로 호출되는 onChanged 매개변수가 있다.
자동으로 build 함수를 호출해서 매번 재구성해야 하기 때문에 세터(setState) 호출은 필수다.

플러터에서 제공하는 수많은 종류의 버튼 중에서
많이 사용하는 버튼 일부를 이번에 보자.

해당 버튼 클래스의 이름을 제목으로 표시했다.
가장 많이 사용하는 RaisedButton, 버튼 눌림 기능이 없는 FlatButton,
상단 제목의 왼쪽이나 오른쪽에 주로 들어가는 IconButton(프린터),
안드로이드에서 주로 사용하는 공중에 떠있는 듯한 FloatingActionButton,
버튼은 아니지만 버튼처럼 사용할 수 있는 InkWell,
마지막으로 사진으로 만든 버튼까지.

버튼을 누르면  눌린 버튼의 클래스 이름을 하단에 스낵바 형태로 출력한다.
스낵바는 컨텍스트가 있어야 하고
StatelessWidget 클래스를 상속 받았기 때문에 별도로 저장을 하고 있다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼 종류',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼 종류'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    BuildContext ctx;
    
    @override
    Widget build(BuildContext context) {
        ctx = context;
        return Center(
            child: Column(
                children: <Widget>[
                    RaisedButton(
                        child: Text('RaisedButton', style: TextStyle(fontSize: 24)),
                        onPressed: () => showMessage('RaisedButton'),
                    ),
                    FlatButton(
                        child: Text('FlatButton', style: TextStyle(fontSize: 24)),
                        onPressed: () => showMessage('FlatButton'),
                        color: Colors.green,
                        textColor: Colors.white,
                    ),
                    IconButton(
                        icon: Icon(Icons.print),
                        onPressed: () => showMessage('IconButton'),
                    ),
                    FloatingActionButton(
                        child: Icon(Icons.add),
                        onPressed: () => showMessage('FloatingActionButton'),
                    ),
                    InkWell(
                        child: Text('InkWell', style: TextStyle(fontSize: 24)),
                        onTap: () => showMessage('InkWell'),
                    ),
                    InkWell(
                        child: Image.asset('images/family_1.jpg', width: 120, height: 120),
                        onTap: () => showMessage('ImageButton'),
                    ),
                ],
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            ),
        );
    }
    
    void showMessage(String msg) {
        final snackbar = SnackBar(content: Text(msg));

        Scaffold.of(ctx)
            ..removeCurrentSnackBar()
            ..showSnackBar(snackbar);
    }
}

코드에서 그렇게 눈여겨볼 것은 없어 보인다.
가능하면 같은 형태로 만들기 위해 child와 onPressed 매개변수만 처리했다.

FlatButton 위젯은 Text 위젯을 통해서 출력이 표현되는 것이 아니라
color와 textColor 매개변수가 별도로 존재하기 때문에 따로 색상을 주어서 처리했다.

InkWell 위젯은 사용자 입력을 받을 수 있는 사각형의 단순 영역으로
실제 버튼처럼 동작하지는 않기 때문에 onTap 매개변수가 존재한다.
1회 탭이 아니라 더블탭부터 여러 가지 제스처를 제공하기 때문에 활용범위가 매우 넓은 위젯이다.

사진 버튼은 정해진 클래스가 없다.
이번 코드에서는 InkWell 위젯을 사용해서 구현했는데
child 매개변수로 Image 위젯만 전달하면 어떤 버튼이든 사진을 표시할 수 있다.
다만 해당 버튼이 갖고 있는 특징 때문에 눌렀을 때의 효과같은 것들은 적절한지 직접 확인해야 한다.

예정에 없던 코드가 추가됐다.
예제란 것은 보는 사람의 동기를 부여할 수 있어야 하는데..
간단하게 구성할 때는 사진만한 것이 없다.

버튼 두 개로 사진을 번갈아 보여주는 코드를 만들었다.
우재한테 문제로 내면 좋을 것 같아서
어떤 어려운 부분이 있을까.. 검증하는 코드였는데..

이게 만드는 과정에서 매우 까다로웠다.
플러터의 특성 때문에
아이폰이나 안드로이드 앱에서 직접 코딩하는 것과는 많이 달랐다.
원했던 것은 화면에 있는 것처럼
사진이 전체 화면을 모두 덮는 것이었다.
잘 되지 않았고.. 시행착오를 많이 겪었다.
도전해 볼텐가?

이번 예제에서는 Stack 클래스를 사용했고
억지로 Align 클래스까지 사용을 했다. Center 클래스 친구라고 보면 된다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼 문제',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼 문제'),),
            body: Hobby(),
        ),
    ));
}

class Hobby extends StatefulWidget {
    @override
    State createState() {
        return HobbyState();
    }
}

class HobbyState extends State<Hobby> {
    String selected = 'images/family_4.jpg';

    @override
    Widget build(BuildContext context) {
        return Stack(
            children: <Widget>[
                SizedBox.expand(
                    child: Image.asset(
                        selected,
                        fit: BoxFit.fill
                    ),
                ),
                Container(child:
                    Align(
                        child: Row(
                            children: <Widget>[
                                makeButton('산', () => selected='images/family_4.jpg'),
                                makeButton('바다', () => selected='images/family_2.jpg'),
                            ],
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        ),
                        alignment: Alignment.bottomCenter,
                    ),
                    padding: EdgeInsets.only(bottom: 50),
                ),
            ],
        );
    }
    
    Widget makeButton(String title, VoidCallback callback) {
        return RaisedButton(
            child: Text(title),
            onPressed: () {
                setState(() => callback());
            },
        );
    }
}

상태를 변경할 변수는 사진이 있는 경로이므로 문자열로 처리한다.
문제는 사진이 전체 화면에 꽉 차게 만들어야 하는데
width와 height 옵션을 주면 쉽지만, 자존심 때문에 그러고 싶지 않았다.

Positioned와 Expanded 클래스는 비슷하게 만들 수 있지만
이미지 위젯이 커지는 것이 아니라
이미지를 감싸고 있는 부모 위젯이 커지는 것이라서 화면 전체를 덮지 못한다.

부모하고 똑같이 만들고 싶다면
SizedBox 클래스로 크기를 설정할 때 expand 생성자를 사용하면 된다.

SizedBox 클래스를 사용한 두 번째 방법은
부모 클래스의 크기를 모르니까 엄청 크게 주는 것이다.

SizedBox(
    child: Image.asset(
        selected,
        fit: BoxFit.fill
    ),
    width: double.infinity,
    height: double.infinity,
),

이제 버튼이 2개다.
2개를 만들 줄 알면 3개나 4개 만드는 것은 쉽다.
2개의 버튼을 사용해서 가운데 있는 텍스트의 값을 변경하는 예제다.
'더하기'를 누르면 값이 증가하고 '빼기'를 누르면 값이 감소한다.
할 수 있겠지?

새로운 코드가 추가되고 하기 보다는
앞에서 배웠던 것들을 잘 조합하는 문제이기 때문에
직접 해볼 것을 강력히 추천한다!!

클래스의 이름을 GameBoard로 수정했고
버튼 생성을 쉽게 하기 위해 makeButton 함수를 만들었다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼 확장',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼 확장'),),
            body: GameBoard(),
        ),
    ));
}

class GameBoard extends StatefulWidget {
    @override
    State createState() {
        return GameBoardState();
    }
}

class GameBoardState extends State<GameBoard> {
    int currentValue = 0;

    // 화살표(=>) 문법을 사용해서 한 줄짜리 함수 구성
    // void addValue() => currentValue++;
    // void subValue() => currentValue--;
    
    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                Container(
                    child: Text(
                        currentValue.toString(),
                        style: TextStyle(fontSize: 128),
                    ),
                    padding: EdgeInsets.all(32),
                ),
                Row(
                    children: <Widget>[
                        // makeButton('더하기', addValue),
                        // makeButton('빼기', subValue),
                        
                        // 간단한 코드라서 함수를 따로 구성할 필요가 없다.
                        makeButton('더하기', () => currentValue++),
                        makeButton('빼기', () => currentValue--),
                    ],
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                ),
            ],
            mainAxisAlignment: MainAxisAlignment.center,
        );
    }
    
    Widget makeButton(String title, VoidCallback callback) {
        return RaisedButton(
            child: Text(title),
            onPressed: () {
                setState(() {
                    callback();
                });
            },
        );
    }
}

가장 중요한 것은
setState 함수에 사용할 함수를 처리하는 부분인데
다트에는 => 문법이 있어서 한 줄짜리 함수를 축약해서 표현할 수 있고
한 줄이라서 함수 매개변수로 직접 사용할 수도 있다.
주석으로 막아놓은 부분을 대신할 수 있기 때문에 얼마나 편리한지 모르겠다.

함수가 어떻게 선언됐는지 알아야 할 때가 있다.
VoidCallback 함수라는 것을 찾으려면
onPressed 매개변수를 ctrl + 마우스 왼쪽 버튼으로 클릭하면 된다. (맥은 cmd)
그러면 매개변수가 정의된 곳으로 이동하고 해당 변수의 자료형을 만날 수 있다.
VoidCallback 자료형은 typedef 키워드를 사용해서 함수를 쉽게 사용할 수 있도록 재정의한 자료형이다.

혹시 눈치챘을려나?
우재는 정직해서 몰랐을 것 같은데..

setState 함수에 전달할 익명 함수도 한 줄이기 때문에 화살표 문법으로 대신할 수 있다.
이게 원래 해보기 전에는 긴가민가 하다.

Widget makeButton(String title, VoidCallback callback) {
    return RaisedButton(
        child: Text(title),
        onPressed: () {
            setState(() => callback());
        },
    );
}

사용자가 액션을 취하고
그 액션에 대응해서 뭔가를 한다는 것은 역시 피곤하다.

이전 글에서 하려던..
버튼을 눌렀을 때 다른 색상으로 버튼 배경색을 변경해 보자.
버튼을 누를 때마다 검정색과 파랑색이 번갈아 나타나도록 처리했다.

계속해서 사용하던 MyApp 클래스 대신 MyButton 클래스를 만들었고
StatelessWidget 클래스 대신 StatefulWidget 클래스를 상속 받고 있다.
StatelessWidget 클래스는 build 함수에서 생성한 객체를 반환했지만
StatefulWidget 클래스는 createState 함수에서 생성한 객체를 반환하는 부분이 일단 가장 달라 보인다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼'),),
            body: MyButton(),
        ),
    ));
}

class MyButton extends StatefulWidget {
    @override
    State createState() {
        return MyButtonState();
    }
}

class MyButtonState extends State<MyButton> {
    var backColor = Colors.black;
    
    @override
    Widget build(BuildContext context) {
        return Center(
            child: RaisedButton(
                child: Text('상태'),
                onPressed: () {
                    // 에러는 아니지만, 배경색을 바꿀 수 없음
                    // backColor = Colors.lightBlue;
                    
                    setState(() {
                        backColor = (backColor == Colors.black) ? Colors.lightBlue : Colors.black;
                    });
                },
                textColor: Colors.white,
                color: backColor,
            ),
        );
    }
}

이전 글에서 color 속성이 final로 정의됐기 때문에 직접 변경할 수 없다는 것은 알았다.
플러터에서 제공하는 방법은 상태(state)를 통한 위젯 재구축(re-build)이다.
RaisedButton 클래스는 상태를 갖지 않는 StatelessWidget 클래스를 상속 받기 때문에
생성자를 통해서 필요한 값들을 전달하고 나면 메모리에서 삭제될 때까지 그 상태를 유지해야 한다.
새로운 상태를 주고 싶다면 없애고 다시 만드는 방법밖에 없다.

그런데 이전 글에서는 버튼 생성을 build 함수에서 하고 있기 때문에
결국 버튼을 다시 만드는 방법은 build 함수를 호출하는 것밖에 없는데.. 이게 어렵다.
그래서 우리 대신 build 함수를 대신 호출해 줄 수 있는 StatefulWidget 클래스를 사용해서 처리한다.
다시 말하지만 StatelessWidget 클래스의 build 함수는 최초 생성할 때 1회 호출되고 다시 호출할 수 없다.
다시 호출한다는 것은 새로운 객체를 만든다는 뜻이다.

StatefulWidget 클래스의 build 함수를 세터(setter)를 통해 자동 호출되도록 설계되었다.
세터를 정의하는 방법은 코드에서 보는 것처럼
onPressed 매개변수에 전달할 함수에서 setState 함수를 호출하면 된다.
그런데 setState 함수가 필요로 하는 매개변수가 함수이기 때문에 다시 함수를 정의한다.
이때 사용하는 함수는 매개변수도 없고 반환값도 없다.

setState 함수는 두 가지 역할을 하게 된다.
함수 호출을 했으니까 해당 함수가 해야할 세터로써의 역할과
매개변수로 전달된 함수를 호출하는 역할.
매개변수로 넘어온 함수를 호출해서 멤버변수의 값을 바꾸고
바뀐 값이 반영되도록 build 함수를 호출하는 것이 setState 함수가 하는 역할이다.

참.. StatefulWidget은 State 클래스와 연동해서 사용하도록 설계되었다.
크기가 작은 경우에는 기능을 하나로 합치는 것이 좋지만
프로젝트 규모가 커질 때를 생각하면 나뉘어 있는 것이 좋다.
객체의 상태를 유지하는 MyButtonState 클래스와
객체를 관리하는 MyButton 클래스가 그것이다.
문제는 해당 코드를 어떤 클래스에 넣는지가 어려운 데
이후 코드를 통해 정리해 나가도록 하자.

문제 하나 낸다.
버튼이 눌릴 때마다 "검정색"과 "파랑색" 글자로 버튼 제목을 변경해 보자.
기존 코드에 조금만 살을 붙여본다.

지금까지 얘기했던 것과 버튼은 액션이라는 점에서 다르다.
텍스트나 사진은 일반적으로는 보여주기만 하고
사용자로부터 입력을 받거나 하지는 않는다.

화면 중앙에 간단하게 버튼을 만들었다.
버튼의 종류에는 여러 가지가 있는데
가장 쉬운지는 모르겠지만, 가장 흔하게 볼 수 있는 푸시 버튼이다.
플러터에서는 RaisedButton 클래스가 푸시 버튼의 역할을 담당한다.

나중을 위해 글자 색과 배경 색 옵션을 추가했다.
버튼 안에 텍스트 위젯이 들어간다는 점이 신선할 수도 있지만
이렇게 해야 버튼 제목에 대해 할 수 있는 것이 많아지기 때문에
번거로울 수 있지만 굉장한 장점이다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: RaisedButton(
                child: Text('Click me!'),
                onPressed: clickMe,
                textColor: Colors.white,
                color: Colors.black,
            ),
        );
    }
    
    void clickMe() {
        print('clicked!');
    }
}

가장 중요한 것은 onPressed 매개변수로
버튼을 눌렀을 때 호출되는 함수와의 연결을 담당한다.
연결에 사용되는 함수의 형태는 매개변수도 없고 반환값도 없는 가장 단순한 형태이다.

버튼을 누를 때마다 안드로이드 창에 'clicked' 문자열이 출력되어야 한다.
혹시라도 아무 것도 나타나지 않는다면 뭔가 잘못된 것이다.
굿럭!

비슷하지만 다른 코드를  하나 더 준비했다.
버튼을 눌렀을 때 호출될 함수를 따로 구현하지 않고 바로 정의할 수 있다.
핫 리로드 기능을 사용해서 'clicked!'가 '눌림!'으로 바뀌는지 확인해 보자.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: RaisedButton(
                child: Text('Click me!'),
                onPressed: () {
                    print('눌림!');
                    
                    // 배경색을 주황으로 바꾸고 싶지만, 에러!
                    // this.color = Colors.orange;
                },
                textColor: Colors.white,
                color: Colors.black,
            ),
        );
    }
}

원래는 주석으로 설명을 달아놓은 것처럼
버튼 누를 때마다 버튼의 배경색을 변경하고 싶었다.
그런데 이 코드로는 할 수 없다.
가장 단순하고 직관적인 코드를 사용할 수 없어서 아쉽다.

에러가 나는 이유는
color 속성이 존재하기는 하지만 final로 정의했기 때문에 수정할 수 없다.
즉, 읽기 전용 속성이라고 보면 된다.
this는 현재 객체, 버튼이 눌렸으니까 버튼이 된다.

하루종일 도서관에 앉아 뭘 하는지 모르겠다는 생각이 든다.
정리하지 않고 나만 알아도 되는 것을 왜 이렇게 열심인지..
하루 열심히 해도 2개나 3개밖에 못 만드는데..
우재야.. 너 때문이다!

Image 클래스에 들어가는 fit 옵션에 대해서 살펴보자.
fit 매개변수에 전달되는 값은 BoxFit 클래스에 정의된 enum 상수.
아래 화면을 보면 조금씩 다르게 출력되는 것을 알 수 있다.
첫 번째 사진이 원본이니까 나머지는 원본과 비교해서 보면 된다.

• 1번 : 원본. 가로세로 비율 변화 없음(contain)
  
• 2번 : 지정한 영역을 꽉 채운다. 비율 변경됨. 가장 많이 사용하는 옵션 중의 하나(fill)
• 3번 : 너비에 맞게 확대 또는 축소. 수평으로 크기 때문에 위아래 여백 발생(fitWidth)
• 4번 : 높이에 맞게 확대 또는 축소. 수평으로 크기 때문에 수평 잘리는 영역 발생(fitHeight)
• 5번 : 지정한 영역을 꽉 채운다. 비율 유지. 3번 또는 4번을 상황에 맞게 선택(cover)
• 6번 : 원본 크기 유지. 원본으로부터 해당 영역 크기만큼 가운데를 출력. 기본 옵션(none)

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '사진 옵션',
        home: Scaffold(
            appBar: AppBar(title: Text('사진 옵션'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Column(children: <Widget>[
            Row(children: <Widget>[
                makeImage(BoxFit.contain),
                makeImage(BoxFit.fill),
            ]),
            Row(children: <Widget>[
                makeImage(BoxFit.fitWidth),
                makeImage(BoxFit.fitHeight),
            ]),
            Row(children: <Widget>[
                makeImage(BoxFit.cover),
                makeImage(BoxFit.none),
            ]),
        ]);
    }

    Widget makeImage(BoxFit option) {
        return Container(
            child: Image.asset('images/family_1.jpg', width: 200, height: 200, fit: option),
            padding: EdgeInsets.only(left: 2, right: 2, bottom: 1),
        );
    }
}