31. 플러터 : 앨범 + 카메라

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

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

앱을 구동하면 나타나는 화면.
사진도 카메라도 없기 때문에 '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(),
            )
        )
    ));
}

30. 플러터 : 서버/클라이언트 연동 (5)

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(() {});
});
}
}
),
],
),
],
);
}
}


29. 플러터 : 서버/클라이언트 연동 (4)

이전 글인 "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),
),
],
),
],
);
}
}


28. 플러터 : 서버/클라이언트 연동 (3)

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

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

서버는 파이썬의 플라스크(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),
),
],
),
],
);
}
}


27. 플러터 : 서버/클라이언트 연동 (2)

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

이전 글에서는 사용자 정보를 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],
);
}
}


26. 플러터 : 서버/클라이언트 연동 (1)

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

첫 번째 시간으로 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 목록을 확인할 수 있다.
앱에서 서버에 접근하기 전에
크롬 등의 브라우저를 사용해서 해당 주소가 잘 동작하는지 먼저 확인해야 한다. 꼭!



25. 플러터 : 텍스트 파일 읽기

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

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

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


먼저 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');
}
}


24. 플러터 : 목록 보기 (화면 전환)

여기까지만 할까?

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

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



이번 코드에서 중요한 점은
첫 번째로 데이터 클래스를 만들어서 리스트를 생성하고 상세보기 클래스에 전달하는 방법.
두 번째로 위젯이 많이 중첩돼서 헷갈리지만, 출력물이 화면 가운데 오게 하는 방법.
세 번째로 커스텀 셀(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),
),
],
),
),
);
}
}


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

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

23. 플러터 : 목록 보기 (무제한)

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

왼쪽은 앱 실행 후 첫 번째 화면, 오른쪽은 여러 페이지를 이동한 후의 화면.
출력 문자열은 양쪽에 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번 자식
],
),
),
),

22. 플러터 : 목록 보기 (리스트뷰 기본)

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

항목이 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 함수를 통하지 않으면 화면에 아무 것도 표시되지 않아.

21. 플러터 : 탭바

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

탭바 인터페이스의 구현은 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(),
]

20. 플러터 : 탭바 기본 (아이콘 + 제목)

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



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

구조체 같은 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 클래스에서 제공하는 많지 않은 데이터를 보여주는 위젯이다.


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

19. 플러터 : 탭바 기본

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

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



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

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

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(),
),
),
);
}
}

'플러터' 카테고리의 다른 글

21. 플러터 : 탭바  (0) 2019.02.11
20. 플러터 : 탭바 기본 (아이콘 + 제목)  (0) 2019.02.11
19. 플러터 : 탭바 기본  (0) 2019.02.11
18. 플러터 : 화면 이동(네비게이션)  (0) 2019.02.10
17. 플러터 : 로그인  (0) 2019.02.09
16. 플러터 : 텍스트 입력  (0) 2019.02.08

18. 플러터 : 화면 이동(네비게이션)

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

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

왼쪽 화면(페이지)에서 버튼을 누르면 오른쪽 화면으로 이동하고,
"처음 화면으로 돌아가기" 버튼을 누르면 왼쪽 화면으로 돌아가게 만들었어.
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();
},
),
),
);
}
}


17. 플러터 : 로그인

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

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

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



설명할 게 너무 많아서 코드에 주석을 달아야 했다.
중복되는 코드가 많아서 기본 함수인 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';

'플러터' 카테고리의 다른 글

19. 플러터 : 탭바 기본  (0) 2019.02.11
18. 플러터 : 화면 이동(네비게이션)  (0) 2019.02.10
17. 플러터 : 로그인  (0) 2019.02.09
16. 플러터 : 텍스트 입력  (0) 2019.02.08
15. 플러터 : 버튼 종류  (0) 2019.02.08
14. 플러터 : 버튼 + 사진  (0) 2019.02.07

16. 플러터 : 텍스트 입력

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

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) 호출은 필수다.

'플러터' 카테고리의 다른 글

18. 플러터 : 화면 이동(네비게이션)  (0) 2019.02.10
17. 플러터 : 로그인  (0) 2019.02.09
16. 플러터 : 텍스트 입력  (0) 2019.02.08
15. 플러터 : 버튼 종류  (0) 2019.02.08
14. 플러터 : 버튼 + 사진  (0) 2019.02.07
13. 플러터 : 버튼 확장  (0) 2019.02.07

15. 플러터 : 버튼 종류

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

해당 버튼 클래스의 이름을 제목으로 표시했다.
가장 많이 사용하는 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 위젯만 전달하면 어떤 버튼이든 사진을 표시할 수 있다.
다만 해당 버튼이 갖고 있는 특징 때문에 눌렀을 때의 효과같은 것들은 적절한지 직접 확인해야 한다.

'플러터' 카테고리의 다른 글

17. 플러터 : 로그인  (0) 2019.02.09
16. 플러터 : 텍스트 입력  (0) 2019.02.08
15. 플러터 : 버튼 종류  (0) 2019.02.08
14. 플러터 : 버튼 + 사진  (0) 2019.02.07
13. 플러터 : 버튼 확장  (0) 2019.02.07
12. 플러터 : 버튼 (Stateless vs. Stateful)  (0) 2019.02.07

14. 플러터 : 버튼 + 사진

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

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

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



이번 예제에서는 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,
),

'플러터' 카테고리의 다른 글

16. 플러터 : 텍스트 입력  (0) 2019.02.08
15. 플러터 : 버튼 종류  (0) 2019.02.08
14. 플러터 : 버튼 + 사진  (0) 2019.02.07
13. 플러터 : 버튼 확장  (0) 2019.02.07
12. 플러터 : 버튼 (Stateless vs. Stateful)  (0) 2019.02.07
11. 플러터 : 버튼  (0) 2019.02.07

13. 플러터 : 버튼 확장

이제 버튼이 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());
},
);
}


'플러터' 카테고리의 다른 글

15. 플러터 : 버튼 종류  (0) 2019.02.08
14. 플러터 : 버튼 + 사진  (0) 2019.02.07
13. 플러터 : 버튼 확장  (0) 2019.02.07
12. 플러터 : 버튼 (Stateless vs. Stateful)  (0) 2019.02.07
11. 플러터 : 버튼  (0) 2019.02.07
10. 플러터 : 사진 옵션(BoxFit)  (0) 2019.02.03

12. 플러터 : 버튼 (Stateless vs. Stateful)

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

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



계속해서 사용하던 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 클래스가 그것이다.
문제는 해당 코드를 어떤 클래스에 넣는지가 어려운 데
이후 코드를 통해 정리해 나가도록 하자.

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

'플러터' 카테고리의 다른 글

14. 플러터 : 버튼 + 사진  (0) 2019.02.07
13. 플러터 : 버튼 확장  (0) 2019.02.07
12. 플러터 : 버튼 (Stateless vs. Stateful)  (0) 2019.02.07
11. 플러터 : 버튼  (0) 2019.02.07
10. 플러터 : 사진 옵션(BoxFit)  (0) 2019.02.03
9. 플러터 : 사진 배치  (0) 2019.02.03

11. 플러터 : 버튼

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

화면 중앙에 간단하게 버튼을 만들었다.
버튼의 종류에는 여러 가지가 있는데
가장 쉬운지는 모르겠지만, 가장 흔하게 볼 수 있는 푸시 버튼이다.
플러터에서는 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는 현재 객체, 버튼이 눌렸으니까 버튼이 된다.


'플러터' 카테고리의 다른 글

13. 플러터 : 버튼 확장  (0) 2019.02.07
12. 플러터 : 버튼 (Stateless vs. Stateful)  (0) 2019.02.07
11. 플러터 : 버튼  (0) 2019.02.07
10. 플러터 : 사진 옵션(BoxFit)  (0) 2019.02.03
9. 플러터 : 사진 배치  (0) 2019.02.03
8. 플러터 : 사진 (2)  (0) 2019.02.02

10. 플러터 : 사진 옵션(BoxFit)

하루종일 도서관에 앉아 뭘 하는지 모르겠다는 생각이 든다.
정리하지 않고 나만 알아도 되는 것을 왜 이렇게 열심인지..
하루 열심히 해도 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),
);
}
}


fit 옵션을 사용하려면 명확하게 크기를 지정해야 한다.
화면을 꽉 채우고 각각의 사진을 구분할 수 있도록 크기는 200으로 하고 여백을 조금 줬다.

두 번째 코드를 보자.
행과 열을 한 번에 처리해주는 클래스가 있다.
GridView 클래스라고 하는데 일반적으로 count 생성자를 통해 객체를 생성한다.

첫 번째 코드와 출력만 놓고 보면 비슷하게 하려고 했기 때문에 구분이 어렵다.
자세히 보면 사진의 간격이 다르다.
이렇게 얘기해도 잘 모르겠지만.


코드가 훨씬 간단하다.
여백을 내부적으로 처리해주기 때문에 Container 객체로 감싸지 않아도 된다.
그래서 앞에서 사용했던 makeImage 함수를 없애고 Image 객체를 children 매개변수에 바로 전달했다.

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 GridView.count(
padding: const EdgeInsets.all(5.0),
mainAxisSpacing: 5.0,
crossAxisSpacing: 10.0,
crossAxisCount: 2,
children: <Widget>[
Image.asset('images/family_1.jpg', fit: BoxFit.contain),
Image.asset('images/family_1.jpg', fit: BoxFit.fill),
Image.asset('images/family_1.jpg', fit: BoxFit.fitWidth),
Image.asset('images/family_1.jpg', fit: BoxFit.fitHeight),
Image.asset('images/family_1.jpg', fit: BoxFit.cover),
Image.asset('images/family_1.jpg', fit: BoxFit.none),
],
);
}
}


padding은 GridView 클래스 객체 전체에 적용되는 여백이다.
mainAxisSpacing은 수평 기준으로 자식 위젯을 떨어뜨려야 하는 간격이고
crossAxisSpacing은 수직 기준으로 자식 위젯간의 간격이다.
crossAxisCount 매개변수가 가장 중요한데 열(column)에 들어가는 자식 위젯의 갯수를 말한다.

'플러터' 카테고리의 다른 글

12. 플러터 : 버튼 (Stateless vs. Stateful)  (0) 2019.02.07
11. 플러터 : 버튼  (0) 2019.02.07
10. 플러터 : 사진 옵션(BoxFit)  (0) 2019.02.03
9. 플러터 : 사진 배치  (0) 2019.02.03
8. 플러터 : 사진 (2)  (0) 2019.02.02
7. 플러터 : 사진 (1)  (0) 2019.02.02

9. 플러터 : 사진 배치

여러 장의 사진을 다뤄보자.
앞에서 Row와 Column 위젯을 배웠으니까
아래 사진처럼 출력하는 것은 어렵지 않다고 생각할 것이다.
사용한 사진은 "7. 플러터 : 사진 (1)"에 들어있다.

그런데 내가 갖고 있는 4장의 사진은 크기가 다르다.
1번과 2번 사진의 크기가 같고 3번과 4번 사진의 크기가 같다.
화면에서는 1, 3, 4, 2 순서로 출력하고 있다.
그리고 사진 주변으로 약간의 여백을 줬다.


일반적인 방법을 사용한다면
출력할 사진의 영역을 구하기만 하면 된다.
이번 코드에서는 너비와 높이를 똑같이 줬고, 수평 크기를 절반으로 나눴기 때문에 너비(width)만 알면 된다.
화면의 크기는 MediaQuery 클래스를 통해 할 수 있다.

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) {
final width = MediaQuery.of(context).size.width ~/ 2;
return Column(
children: <Widget>[
makeRow('images/family_1.jpg', 'images/family_3.jpg', width: width.toDouble()),
makeRow('images/family_4.jpg', 'images/family_2.jpg', width: width.toDouble()),
],
);
}

Widget makeRow(String leftPath, String ritePath, {double width}) {
return Row(
children: <Widget>[
Container(
child: Image.asset(leftPath, width: width-10, height: width-10),
padding: EdgeInsets.all(5.0),
),
Container(
child: Image.asset(ritePath, width: width-10, height: width-10),
padding: EdgeInsets.all(5.0),
),
],
);
}
}


~/ 연산은 정수 나눗셈을 수행한다. width 변수의 자료형은 int가 되고
makeRow 함수에 직접 전달할 수 없기 때문에 toDouble 함수로 형변환을 한다.

makeRow 함수에서 사진 2장을 수평으로 출력한다.
이때 4방향 모두에 대해 여백을 주고 싶기 때문에 margin 또는 padding 옵션이 필요하다.
문제는 Image 클래스에는 이런 옵션이 없다는 점.
그래서 Container 클래스로 감싸서 이 부분을 처리하게 된다.

그렇다면 출력된 사진의 실제 크기는 어떻게 될까?
패딩을 줬다면 패딩만큼 줄어든 크기가 되는 것인가?
아니다.
패딩은 Container 위젯에 줬기 때문에 Image 위젯과는 상관이 없다.
Image 위젯을 생성할 때 10을 빼지 않으면 화면을 벗어나기 때문에 원하는 결과를 얻지 못한다.
꼭 직접 확인해 볼 것.


두 번째 예제를 보자.
첫 번째 예제에서는 가로와 세로 크기가 같았지만, 이번에는 가로와 세로 비율이 달라질 수 있고
중요한 것은 화면을 꽉 채우고 싶다는 것이다.


쉽게 보면, 가로와 세로 크기를 알면 된다.
가로 크기는 앞의 예제에서 구했고 세로 크기만 구하면 된다.
두 장의 사진을 비교해서 적절한 비율을 찾은 다음에 가로(너비)에 곱하면 세로(높이)를 구할 수 있다.

그러나 최신의 언어와 도구를 사용하고 있다면
계산하지 않고도 구할 수 있는 방법이 있지 않을까?
Expanded와 IntrinsicHeight 클래스의 조합으로 그와 같은 일을 할 수 있다.

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>[
makeRow('images/family_1.jpg', 'images/family_3.jpg'),
makeRow('images/family_4.jpg', 'images/family_2.jpg'),
],
);
}

Widget makeRow(String leftPath, String rightPath) {
return IntrinsicHeight(
child: Row(
children: <Widget>[
makeExpandedImage(leftPath),
makeExpandedImage(rightPath),
],
crossAxisAlignment: CrossAxisAlignment.stretch,
),
);
}

Widget makeExpandedImage(String imagePath) {
return Expanded(
child: Container(
child: Image.asset(imagePath, fit: BoxFit.cover),
margin: EdgeInsets.all(5.0),
),
);
}
}


수평에 들어가는 모든 사진은 같은 너비를 가져야 한다.
사진 각각에 대해 Expanded 위젯으로 감싼 다음에 Row 또는 Column 위젯에 전달하면 된다.
이때 Image 객체의 크기를 여백(padding 또는 margin)만큼 줄여주지 않아도 된다.
수평에 들어가는 위젯의 대상이 Container이기 때문이고 사진은 Container 크기에서 margin만큼 뺀 크기로 자동 설정된다.

다만 이렇게 하면 Image 객체의 너비만 같고 높이는 같지 않게 된다.
CrossAxisAlignment 클래스(enum)의 stretch 옵션으로 수직으로 늘려주면 높이도 같아진다.
그러나, 어느 정도로 늘려줘야 하는지에 대한 기준이 없기 때문에 결과가 분명하게 나오지 않는다.
IntrinsicHeight 클래스는 자식 위젯이 갖고 있는 원래 크기에 맞게 자식 위젯의 크기를 설정한다.
이 말은 하위 자식 위젯들에 대해 Row 위젯과 같은 높이가 되도록 설정하는 것을 말한다.
역시 IntrinsicHeight 객체로 감싸지 않은 상태에서의 결과도 확인해 봐야 할 것이다.

'플러터' 카테고리의 다른 글

11. 플러터 : 버튼  (0) 2019.02.07
10. 플러터 : 사진 옵션(BoxFit)  (0) 2019.02.03
9. 플러터 : 사진 배치  (0) 2019.02.03
8. 플러터 : 사진 (2)  (0) 2019.02.02
7. 플러터 : 사진 (1)  (0) 2019.02.02
6. 플러터 : 텍스트 집합(Row + Column)  (0) 2019.02.02

8. 플러터 : 사진 (2)

앞에서 배운 코드에 약간의 옵션을 추가해 보자.
사진을 화면 가운데 오도록 했는데.. 어떻게 했는지 알겠지?

사진이 화면보다 크기 때문에
사진이 수평으로 꽉 차야 하는데.. 왼쪽과 오른쪽에 조금 여백이 있지?
그리고 사진 색상을 조금 수정했고.


출력 크기는 언제나 width와 height로 정할 수 있어.
이번 예제에서는 크기를 지정하지 않고 padding 옵션을 사용해도 되지만
width와 height 옵션은 사진 출력의 가장 기본이니까.

그런데 여기서 중요한 것은 크기를 모두 지정할 경우에는
가로와 세로의 비율이 달라질 수도 있다는 거야. 지금은 달라지지 않았지만.
가로와 세로 비율이 달라지면 많은 경우에 보기 싫은 사진이 되겠지?

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: Image.asset(
'images/family_1.jpg',
width: 400,
height: 300,
color: Colors.red,
colorBlendMode: BlendMode.colorBurn,
),
);
}
}


color와 colorBlendMode는 그렇게 중요하진 않아.
여러 옵션이 있어서 이런 것도 있다는 걸 보여주려고 선택했을 뿐이다. 
colorBlendMode 옵션은 그림과 색상을 어떻게 조합할지 알려주는 역할을 해.

아래 사진을 보면 사진 비율이 달라진 것을 알 수 있어.
앞에서 얘기한 것처럼 원한다면 width와 height 옵션을 모두 설정하면 돼.


그리고 fit 옵션도 줘야 하지.
fit 옵션에 들어가는 데이터는 BoxFit 클래스(enum)의 값들.
fill을 비롯한 여러 옵션이 모두 중요하기 때문에 꼭 살펴봐야 한다.

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: Image.asset(
'images/family_1.jpg',
width: 400,
height: 100,
fit: BoxFit.fill,
color: Colors.red,
colorBlendMode: BlendMode.colorBurn,
),
);
}
}

'플러터' 카테고리의 다른 글

10. 플러터 : 사진 옵션(BoxFit)  (0) 2019.02.03
9. 플러터 : 사진 배치  (0) 2019.02.03
8. 플러터 : 사진 (2)  (0) 2019.02.02
7. 플러터 : 사진 (1)  (0) 2019.02.02
6. 플러터 : 텍스트 집합(Row + Column)  (0) 2019.02.02
5. 플러터 : 텍스트 집합 (Row, Column)  (0) 2019.02.02

7. 플러터 : 사진 (1)

문자열을 넘어 사진에 도전해 보자.
사진(이미지)을 출력하기 위해서는 준비가 필요해.
다트는 프로젝트에서 사용할 환경 설정을 pubspec.yaml 파일을 통해서 처리하는데
어떤 사진을 사용할 것인지 이 파일에 얘기를 해야 돼.

알려주는 방법에는 두 가지가 있어.
첫 번째는 해당 폴더 전체 사용. 두 번째는 지정한 파일만 사용.
우리가 놀러가서 찍었던 사진을 4장 준비했고,
family_1.jpg, family_2.jpg, family_3.jpg, family_4.jpg라고 이름 붙였어.

family.zip

사진이 얼마나 필요할지는 모르겠지만
앞으로 나오는 모든 코드에서 가능하면 4장까지만 사용하는 걸로.

pubspec.yaml 파일을 열고 아래처럼 수정하자.
첫 번째로 images 폴더의 모든 사진 추가.
참.. 프로젝트에 먼저 images 폴더를 만들어야 한다.
주의할 점은 assets라는 폴더는 따로 만들 필요없고,
반드시 pubspec.yaml 파일이 있는 곳에 만들어야 한다.

flutter:
uses-material-design: true
assets:
- images/


두 번째로 사용할 파일만 사용하는 방법.
아빠는 첫 번째가 편하기 때문에 앞의 코드를 사용하겠어.

flutter:
uses-material-design: true
assets:
- images/family_1.jpg
- images/family_2.jpg
- images/family_3.jpg
- images/family_4.jpg


pubspec.yaml 파일을 수정한 다음에는 파일 상단에 있는 Packages upgrade 메뉴를 눌러주는 것 잊지 말고.
새로운 패키지를 추가하는 경우에는 Packages get 메뉴를 사용할 때도 있고.
오른쪽에 보면 Flutter doctor가 있어서 콘솔에서 사용해야 하는 doctor 명령을 여기서 구동할 수도 있고.


어때, 잘 나왔지?
서핑 처음하러 갔을 땐가..?
실물보다 사진이 안 나와서 고를 만한게 잘 없었어.

사진 첫 번째 코드로 일단 그냥 출력하는 것부터 시작.


images 폴더 생성하고 사진 파일 붙여넣고 pubspec.yaml 파일 수정했다면
아래 코드에서 에러가 나진 않겠지?

Image 클래스에 있는 asset 생성자를 호출하면 끝.
여러 가지 옵션이 있지만 사진이 있는 경로만 전달하자.

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 Image.asset('images/family_1.jpg');
}
}


'플러터' 카테고리의 다른 글

9. 플러터 : 사진 배치  (0) 2019.02.03
8. 플러터 : 사진 (2)  (0) 2019.02.02
7. 플러터 : 사진 (1)  (0) 2019.02.02
6. 플러터 : 텍스트 집합(Row + Column)  (0) 2019.02.02
5. 플러터 : 텍스트 집합 (Row, Column)  (0) 2019.02.02
4. 플러터 : 텍스트 집합 (Stack)  (0) 2019.02.02

6. 플러터 : 텍스트 집합(Row + Column)

앱을 만들면서 얼마나 다양한 형태의 디자인을 하게 될 것인지..
Row와 Column에 대해 배웠으니까
이제는 두 개를 결합해서 사용하는 방법에 대해 보자.

우재야!
아래 화면처럼 만들 수 있겠니?
아빠 코드는 아래쪽에 있는데..
먼저 우재가 한번 만들어 보고 아빠꺼랑 비교하면 좋겠어.
도전해 볼까?!


이번 코드는 Row와 Column 클래스의 사용법이라기보다는
코딩에 대한 경험이 더 중요한 것 같아.
이런 문제에서 함수로 정리한다는 생각이 들지 않으면.. 음..

makeRow 함수를 만들었고, 텍스트 3개에 들어갈 문자열을 매개변수로 받았어.
그리고 Column 클래스 생성자에 전달해서 수직으로 배치.
행과 열 모두 균등하게 배치되어야 하니까 spaceEnvely 옵션을 모두 설정하면 끝.

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>[
makeRow(left: '1', middle: '2', right: '3'),
makeRow(left: '4', middle: '5', right: '6'),
makeRow(left: '7', middle: '8', right: '9'),
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
);
}

Widget makeRow({String left, String middle, String right}) {
return Row(
children: <Widget>[
makeText(left, width: 100, height: 100),
makeText(middle, width: 100, height: 100),
makeText(right, width: 100, height: 100),
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
);

}

Widget makeText(String title, {double width, double height}) {
return Container(
child: Center(child: Text(title, style: TextStyle(fontSize: 23.0),),),
width: width,
height: height,
decoration: BoxDecoration(color: Colors.red[300]),
margin: EdgeInsets.all(10.0),
);
}
}


참.. 다트에서는 변수나 함수 정의할 때 밑줄 문자(_, underscore)를 사용하지 않아.
대신 카멜(camel) 표기법을 사용하지. 첫 글자는 소문자, 이후 단어의 첫 글자는 대문자. 알지?

5. 플러터 : 텍스트 집합 (Row, Column)

Stack 클래스는 좌표를 이용해서 추가하고 싶은 곳에 추가할 수 있어서 많이 사용할 것 같지만
실제로는 규칙이 없기 때문에 많이 사용되지 않는다.
수평으로 배치할 것인지(Row 클래스), 수직으로 배치할 것인지(Column 클래스)가 훨씬 중요하다.

아래 그림에서는 3개의 텍스트 위젯을 수평으로 배치했다.
Row 위젯을 사용했다. 행 안에서 어떻게 배치할 것인지 결정하기 때문에 수평이 된다.


Stack 클래스와 사용법은 비슷하다.
다만 Positioned 클래스를 사용해서 위치를 지정할 필요없이 전체에 대해 지정할 옵션만 선택하면 된다.
여기서는 spaceEvenly 옵션을 사용해서 위젯이 동일한 영역을 차지하도록 했다.

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 Row(
children: <Widget>[
makeText('12', width: 100, height: 50),
makeText('34', width: 100, height: 50),
makeText('56', width: 100, height: 50),
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
);
}

Widget makeText(String title, {double width, double height}) {
return Container(
child: Center(child: Text(title, style: TextStyle(fontSize: 23.0),),),
width: width,
height: height,
decoration: BoxDecoration(color: Colors.red[300]),
margin: EdgeInsets.all(10.0),
);
}
}


mainAxisAlignment 매개변수에 전달되는 값은 규칙에 따라
첫 글자가 대문자인 MainAxisAlignment 클래스(enum) 안에 들어있다.
기본값은 start이기 때문에 옵션을 주지 않으면 왼쪽 경계부터 나란히 배치되는 모습을 보게 된다.

makeText 함수에 추가로 텍스트 위젯 주변에 여백을 줬다.
위젯 바깥 여백을 margin이라 하고, 안쪽 여백을 padding이라고 한다.
여백은 왼쪽, 오른쪽, 위쪽, 아래쪽의 4가지가 있기 때문에 EdgeInsets 클래스를 통해 지정한다.
이 부분은 매개변수 이름하고 같지 않기 때문에 주의가 필요하다.

all 함수는 모든 방향에 대해 같은 값을 준다는 뜻이고,
only 함수를 사용해서 개별적으로 지정할 수도 있다.

만약 Row 위젯이 화면 가운데 오길 바란다면 어떻게 해야 할까?
Center 클래스로 감싸면 끝!

이제 수직으로 배치해 보자.
아래와 같은 결과를 만들려면 Column 클래스를 사용한다.


Column 클래스를 반영했고, 옵션 하나를 추가했다.
행과 열 위젯에서 중요한 개념이 있다.
main은 위젯이 배치되는 방향을 의미하고, cross는 main의 반대 방향을 의미한다.
Row 위젯에서 main은 수평이고 cross는 수직이다.
Column 위젯에서 main은 수직이고 cross는 수평이다.
당연히 수평과 수직에 사용할 수 있는 옵션은 다르다. 이번 예제에서는 cross 옵션으로 stretch를 사용했다.

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>[
makeText('12', width: 100, height: 50),
makeText('34', width: 100, height: 50),
makeText('56', width: 100, height: 50),
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
);
}

Widget makeText(String title, {double width, double height}) {
return Container(
child: Center(child: Text(title, style: TextStyle(fontSize: 23.0),),),
width: width,
height: height,
decoration: BoxDecoration(color: Colors.red[300]),
margin: EdgeInsets.all(10.0),
);
}
}


잘 따라오고 있는지 걱정이 된다.
검증하자. 아래와 같은 화면처럼 출력되도록 코드를 수정하자.

4. 플러터 : 텍스트 집합 (Stack)

이전 코드에서는 Text 위젯 하나에 대해서 스타일도 적용하고 했는데
이번에는 여러 개의 Text 위젯을 함께 사용하는 방법에 대해서 보도록 하자.

아래 화면에서 보면, Text 위젯을 3개 만들었음을 알 수 있다.
Text 위젯 하나 만들기가 너무 번거롭기 때문에 추가 함수를 만들어서 쉽게 처리했다.


기존 코드와 달라진 점은
앞서 설명한 것처럼 배경 있는 텍스트를 위한 makeText 함수 사용이다.
build 함수에서 Stack 클래스를 사용해서 3개의 텍스트 위젯을 그룹으로 묶었다.

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 Stack(
children: <Widget>[
Positioned(child: makeText('왼쪽', width: 100, height: 50), left: 30,),
Positioned(child: makeText('오른쪽', width: 100, height: 50), right: 30,),
Positioned(child: makeText('가운데', width: 100, height: 50), top: 100, left: 100, right: 100,),
],
);
}

// 텍스트 위치를 확인하기 위해 배경을 갖는 Text 객체 생성
// {} 안에 만든 매개변수는 매개변수 이름을 사용해서 전달해야 하고
// 맨 앞의 title은 title 이름 없이 사용할 수 있다.
Widget makeText(String title, {double width, double height}) {
return Container(
child: Center(child: Text(title, style: TextStyle(fontSize: 23.0),),),
width: width,
height: height,
decoration: BoxDecoration(color: Colors.red[300]),
);
}
}

Stack 클래스는 절대 좌표를 사용한다.
여러 자식을 갖기 때문에 자식을 가리키는 매개변수의 이름은 children이다.
child인지 children인지 고민하지 않아도 된다.
ch만 입력해도 자동완성되기 때문에 입력할 때는 구분할 필요가 없다.

<Widget>[]는 Widget을 담는 리스트라는 뜻이다.
다트에는 배열 대신 리스트를 사용한다. 리스트이기 때문에 자료형이 달라도 사용할 수 있지만
배열처럼 사용해야 한다면 <Widget>와 같은 템플릿 기능을 사용하면 된다.

Stack 클래스는 수평 요소인 left, right, width, 수직 요소인 top, bottom, height를 멤버로 갖는다.
주의할 점은 각각 3개의 요소 중에 2개만 사용해야 하고 하나는 null로 남겨둬야 한다.
결국 차지할 영역을 지정하는 것인데 3개 모두 지정하면 영역 지정이 불가능해지니까.

텍스트 위젯에는 Stack 클래스에서 위치를 지정하는 기능이 없기 때문에
Positioned 클래스 또는 PositionedDirectional 클래스를 사용해서 위젯을 감싸야 한다.
내가 지정한 크기를 사용하고 싶다면 left나 right에만 값을 주고
변경하고 싶다면 '가운데' 텍스트 위젯처럼 left와 right 모두에 값을 주면 된다.

3. 플러터 : 텍스트 스타일 (2)

텍스트의 배경을 바꾸고 싶어졌다.
그런데 이게 잘 되지 않았다.
Text 클래스는 말 그대로 텍스트에만 신경쓰고 나머지는 몰라라 했다.
이럴 때 사용하는 클래스로 Container 클래스가 있다.
매개변수로는 child가 있기 때문에 자식은 하나밖에 갖지 못한다.

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: '텍스트 위젯',
home: MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('텍스트 스타일'),),
body: Center(
child: Container(
child: Text(
'우재야, 안녕!',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 41,
color: Colors.red,
),
textAlign: TextAlign.center,
),
decoration: BoxDecoration(
color: Colors.green[300],
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
width: 300.0,
height: 100.0,
),
),
);
}
}

코드 중간에 Container 클래스 생성자에 전달한 매개변수는 몇 개일까?
일단 child가 있고 child와 같은 줄에 decoration과 width, height가 있다. 총 4개.
그래서 줄을 맞추는 것이 중요하다.

decoration 매개변수를 사용해서 텍스트에 장식을 한다.
컨테이너의 색상은 텍스트의 배경색이 되고, 컨테이너 모서리를 둥글게 처리했다.
클래스가 여럿 들어가기는 하지만 이건 장점으로 봐야 한다.
단순하게 숫자를 쓰는 것보다 의미가 훨씬 분명하다.

참, 텍스트 자체의 정렬을 처리하기 위해 Text 클래스 생성할 때
추가로 textAlign 매개변수 전달했다.

하나 더.
색상을 지정할 때 green[300]이라고 했는데
green이 정의된 Colors 클래스로 이동해 보면(맥에서는 cmd + 마우스 왼쪽, 윈도우는 ctrl을 사용하던가..)
사전(map, 딕셔너리) 형태로 구성된 클래스라는 것을 알 수 있다.
[] 안에 들어가는 숫자들이 100부터 900까지 100 단위로 모두 정의되어 있기 때문에
green[300]은 키(key)가 300인 초록색을 사용하겠다는 뜻이 된다.
그냥 초록색은 green을 사용하면 되고 같은 뜻으로 green[500]을 사용할 수 있다.


의도한 대로 나오기는 했지만
수평으로만 정렬됐고 수직으로는 정렬되지 않았다.

이번에는 우리 아들을 위해 문제 하나 주고 답은 보여주지 않는다.
이번 코드를 수정해서 수직으로도 가운데 오도록 만들어 보자.
우재, 화이팅!!

'플러터' 카테고리의 다른 글

5. 플러터 : 텍스트 집합 (Row, Column)  (0) 2019.02.02
4. 플러터 : 텍스트 집합 (Stack)  (0) 2019.02.02
3. 플러터 : 텍스트 스타일 (2)  (0) 2019.02.02
2. 플러터 : 텍스트 스타일 (1)  (0) 2019.02.02
1. 플러터 : 텍스트  (0) 2019.02.01
0. 플러터  (0) 2019.02.01

2. 플러터 : 텍스트 스타일 (1)

첫 번째 코드로 텍스트 출력을 봤으니
이번에는 폰트 크기부터 색상까지 다양한 스타일을 적용해 보자.


수정된 부분은 body 매개변수뿐이라고 보면 된다.
제목도 살짝 바꾸긴 했지만 중요하지 않으니까.

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: '텍스트 위젯',
home: MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('텍스트 스타일'),),
body: Center(
child: Text(
'우재야, 안녕!',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 41,
color: Colors.red,
),
),
),
);
}
}

객체를 생성할 때 계속해서 중첩시켜 호출하는 것이 많이 헷갈렸다.
어렵다고 생각하는 건 아니겠지?
다만 지금 와서 보니 좀 길어지더라도
함수 이름을 첫 줄에, 매개변수는 다음 줄에 나열하는 것이 가독성에 좋아 보인다.
appBar 매개변수처럼 간단하다면 한 줄에 사용하기도 하고.

텍스트에 무언가 하고 싶다면 TextStyle 클래스를 style 매개변수로 전달한다.
여기서는 폰트를 굵게, 크기를 41로, 색상을 빨강으로 처리했다.
플러터에서 일관성 때문에 쉽게 코딩할 수 있는 부분이
FontWeight와 Colors 등의 클래스 이름이다.
매개변수 이름은 첫 글자가 소문자, 해당 매개변수에 전달될 값을 갖는 클래스 이름은 첫 글자가 대문자다.
덕분에 이 부분은 외울 필요없이 선택하기만 하면 됐다.

참, 닫는 괄호 뒤에 쉼표(,)가 있을 때도 있고 세미콜론(;)이 있을 때도 있다.
return과 만나면 세미콜론을 사용한다.
다트는 문장의 끝에 세미콜론을 넣어야 하니까.
나머지는 매개변수로 전달됐기 때문에 쉼표를 넣어도 되고 생략해도 된다.

'플러터' 카테고리의 다른 글

5. 플러터 : 텍스트 집합 (Row, Column)  (0) 2019.02.02
4. 플러터 : 텍스트 집합 (Stack)  (0) 2019.02.02
3. 플러터 : 텍스트 스타일 (2)  (0) 2019.02.02
2. 플러터 : 텍스트 스타일 (1)  (0) 2019.02.02
1. 플러터 : 텍스트  (0) 2019.02.01
0. 플러터  (0) 2019.02.01

1. 플러터 : 텍스트

안드로이드 스튜디오에서 플러터 프로젝트를 만든다.
잘 만들어지지 않으면 만들어져있는 프로젝트로부터 main.dart 파일을 수정해서 사용하도록 한다.
모든 코드는 특정 파일을 언급하지 않으면 main.dart 파일에 들어간다.

스마트폰 앱을 만들어주는 마술같은 첫 번째 코드를 입력해 보자.

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: '첫 번째',
home: Text('처음'),
));
}

처음에는 "뭐, 이런 게 있나!" 싶을 정도로 어색하다.
100% 공감한다.
그런데 며칠 하다 보니까 나름 타협할 수 있는 방법도 있고 해서
꼭 욕을 하면서 코딩할 필요는 없겠다는 생각이 들었다.

import 키워드는 필요한 라이브러리를 사용하기 위해 필요하다.
다트는 어찌 보면 C언어의 후손처럼 느껴지기도 하는데..
반드시 main 함수가 있어야 한다.
main 함수는 매개변수를 가질 수도 있는데.. 스마트폰이니까 무시하면 된다.

main 함수의 역할은 앱을 구동하는 것이다.
runApp 함수가 그 역할을 하고 보여주고 싶은 객체를 전달하면 된다.
MaterialApp 클래스
구글의 안드로이드 앱에서 지향하는 머티리얼 디자인을 적용해 준다.
아이폰과 안드로이드의 디자인을 따로 갈 것이 아니라면
익숙해질 때까지는 머티리얼 디자인을 사용하는 게 좋다고 생각한다.
여기서는 마지막까지도 머티리얼만 사용하려고 작정하고 있다.

MaterialApp 클래스 생성자를 호출해서 객체를 생성하는데
이전 버전에서는 new 키워드를 사용해야 했지만
다트 2.0부터는 new와 const 키워드를 사용하지 않아도 된다.
여기서는 전혀 사용하지 않지만
다른 곳에서는 많이 보게 될거니까.. 그때 놀라지 말자.

파이썬의 키워드 인자처럼 매개변수의 이름을 함수에 전달할 수 있다.
함수를 정의할 때 어떻게 했는지에 따라 결정되지만
대부분은 전달한다고 보면 된다. 궁금하면 생략해 보자. 에러가 날 것이다.

title 매개변수는 앱의 설명을 가리키는데
안드로이드에서는 앱이 태스크 매니저에 표시될 때 사용되지만
아이폰에서는 사용되지 않는다.
코드 상에서는 일부러 '첫 번째'와 '처음'으로 다른 문자열을 전달했다.
다트는 문자열을 표시할 때 작음 따옴표와 큰 따옴표를 같이 쓴다. 파이썬처럼.
다트 표준은 작은 따옴표를 쓰는 것 같다. 큰 따옴표를 잘 볼 수 없다.

home은 화면에 표시될 객체(widget)을 가리킨다.
처음이라서 간단한 텍스트를 표시한다.
정말 중요한 것 하나! 내가 매번 실수하는 것!
문자열을 전달할 때는 Text 클래스로 감싸야 에러가 안 난다.
title에서처럼 문자열만 전달하는 경우는 거의 없고
화면에 문자열을 표시하기 위한 것이 대부분이기 때문에 Text 위젯을 전달하는 것이 맞다.
생략하면 에러.

다트에서 특별한 문법 중의 하나가 매개변수 뒤에 쉼표(,)를 쓸 수 있다는 점이다.
매개변수가 두 개라면 쉼표는 하나만 있어야 하지만
두 번째 매개변수 뒤에 쉼표가 있어도 된다.
MaterialApp 생성자의 매개변수를 보면
각각의 매개변수를 한 줄에 하나씩 썼는데 이게 다트 표준이다.
이때 줄의 마지막에 쉼표가 있는게 에러도 줄여주지만 가독성에도 도움이 된다.
불평하지 말고 익숙해지도록 타이핑이나 많이 하자.

참.. 구글 표기법에서는 들여쓰기를 두 칸씩 하는데
이것만은 도저히 견딜 수가 없어서 나는 모두 4칸 들여쓰기를 한다.
어쩌면 매개변수를 다음 줄에 표기하는 다트에서는 두 칸이 맞을 수도 있지만
그래도 적응이 되지 않아서 내 마음대로 한다.

코딩이 끝났으면 실행해야 한다.
메뉴 상단에 보면 아이폰 시뮬레이터와 안드로이드 에뮬레이터를 선택하는 드롭다운 메뉴가 있다.
아래 그림에서는 "Android SDK built for x86"이라고 되어 있다.


드롭다운 메뉴를 선택하면 아래와 같은 메뉴가 뜬다.
메뉴 하단에 시뮬레이터와 에뮬레이터를 여는 메뉴가 있다.
먼저 눌러서 연 다음에 상단에서 열려있는 디바이스를 선택하면 된다.
아래 그림에서는 아이폰을 충전하는 중이라 실제 아이폰까지 디바이스로 잡혀 있다.

선택이 끝났으면 실행해서 결과를 확인하자.
사실 이 예제를 만들 때는 에러가 날 수도 있겠다고 생각했는데
아무런 문제도 없었다.
그냥 형편 없었을 뿐이다. 그래도 죽지 않은게 어디인가!


참.. 화면 캡쳐가 필요하면 안드로이드 위주로 할 생각이다.
플러터의 기능 중에 hot reload라는 기능이 있는데
이게 아이폰에서는 동작하지 않는다.
가상머신과 관련된 부분이어서 그런 것 같다.
메뉴에서 노란 색으로 된 번개 아이콘이 hot reload 메뉴다.
이걸 선택하면 수정한 부분에 대해서만 반영되기 때문에
실행을 기다리지 않아도 되는 진짜 좋은 기능이다.


이제 두 번째 코드다.
앞의 사진에 나온 것과 같은 코드를 입력해 보자.

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: '첫 번째',
home: Scaffold(
appBar: AppBar(title: Text('처음'),),
),
));
}


Scafold 클래스를 사용해서
상단 제목을 보여주고 머티리얼 디자인까지 앱에 적용해 본다.
어떤가?
계속 들여쓰니까 거의 미칠 것 같은 느낌이 들지 않는가?
복사해서 붙여넣고 있는건가?

Scafold 클래스는 앱의 위쪽, 가운데, 아래쪽에 대해 미리 정리를 해놓은 클래스로
이걸 사용하면 별 생각없이 쉽게 코딩이 가능하다.
당연히 Scafold 클래스 없이 직접 구성할 수 있지만
그건 정말 나중으로 미루기로 하자.

왼쪽이 안드로이드, 오른쪽이 아이폰이다.
아이폰은 특별히 가장 최신의 아이폰 XR을 사용했다.


지금까진 별도의 클래스 없이 main 함수에서만 코딩을 했다.
이제 실제 클래스를 하나 만들어서 main 함수와 연동해 보자.

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 Text('텍스트 위젯');
}
}

StatelessWidget 클래스를 상속 받아서 MyApp 클래스를 정의했다.
StatelessWidget은 단어가 주는 의미 그대로 상태를 갖지 않는다.
쉬운 말로는 화면에 표시되지 않는다. 그래서 상태를 갖는 위젯이 있어야 한다.
build 함수는 반드시 구현해야 하고
여기서 위젯을 중첩시켜서 원하는 화면을 만들어서 반환하면 Scafold에 연결된다.

Scafold 클래스 생성자에 body 매개변수를 추가했고
new 키워드 없이 MyApp 생성자를 호출했다.
왼쪽 상단에 조그맣게 '텍스트 위젯' 문자열이 표시된 것을 볼 수 있다.


텍스트를 화면 가운데로 옮기려면 Center 위젯이 필요하다.
Center 위젯 말고도 여러 가지 방법이 있겠지만, 한가운데를 뜻한다면 Center 위젯이 답이다.

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: Text('텍스트 위젯'),
);
}
}

Center 위젯의 매개변수로 child를 사용했는데, 정말 중요하다.
위젯 안에 위젯을 넣어서 중첩시켜서 복잡한 형태의 위젯을 만드는데
자식을 하나만 가질 때는 child, 여러 개 가질 때는 children을 사용한다.
두 개를 다 가질 수는 없고 둘 중의 하나만 갖게 된다.
Center 위젯은 자식을 하나밖에 못갖기 때문에 child 매개변수를 사용한다.


같은 기능을 하는 조금 다른 코드를 보자.

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: '첫 번째',
home: MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('처음'),),
body: Center(child: Text('텍스트 위젯'),),
);
}
}

이 코드는 Scafold 클래스 객체를 생성하는 위치를 MyApp 클래스 내부로 옮겼다.
개인적으로는 Scafold 클래스 생성은 중요한 부분이 아니라서 main 함수 안쪽에 놓는 걸 좋아하는데
다른 코드를 볼 때는 지금과 같은 코드를 볼 수도 있으니 알아두자.

'플러터' 카테고리의 다른 글

5. 플러터 : 텍스트 집합 (Row, Column)  (0) 2019.02.02
4. 플러터 : 텍스트 집합 (Stack)  (0) 2019.02.02
3. 플러터 : 텍스트 스타일 (2)  (0) 2019.02.02
2. 플러터 : 텍스트 스타일 (1)  (0) 2019.02.02
1. 플러터 : 텍스트  (0) 2019.02.01
0. 플러터  (0) 2019.02.01

0. 플러터

구글에서 공개한 네이티브 앱을 만들 수 있는 오픈소스를 가리킨다.
앱 또한 파이썬으로 구현하고 싶어서 많이도 찾아 다녔는데..
결국 플러터(flutter)로 오게 되었다.
결정을 쉽게 할 수 있도록
구글에서 플러터로 만든 앱을 한 곳에 모아 놓았다. (플러터 앱 보기)

파이썬을 사용하려면 kivy 라이브러리를 사용해야 하는데
아이폰에서 동작하는지도 모르겠고
일단 네이티브 앱을 만들어주는 것도 아니고
결정적으로 앱이 예쁘지 않았다.

플러터를 사용하기 전에 미리 만들어진 앱들을 살펴봤다.
아이폰으로 네이티브 코딩을 한다고 해도
그만큼 잘 만들기가 쉽지 않아 보였다.

치명적일 수 있는 단점이라면
다트(Dart)라는 새로운 언어를 익혀야 하고
익히는 부분에 있어서 악명 높은 부분이 있어서 꺼려졌지만
앱이 너무 예뻐서 모두 받아들이기로 했다.
(다트패드를 사용해서 다트를 맛볼 수 있다.)

개발 환경은 모두 안드로이드 스튜디오로 진행한다.
안드로이드 설치부터 플러터와 다트 플러그인 설치는 문서가 많으니까.. 통과!

목표는 플러터를 사용해서
아이폰의 테이블뷰, 안드로이드의 리스트뷰를 통한 화면 전환까지.
언제나 그랬던 것처럼
이 부분까지 하면 기본적인 앱을 만들 수 있다고 믿는다.
나머지는 각자의 몫!

'플러터' 카테고리의 다른 글

5. 플러터 : 텍스트 집합 (Row, Column)  (0) 2019.02.02
4. 플러터 : 텍스트 집합 (Stack)  (0) 2019.02.02
3. 플러터 : 텍스트 스타일 (2)  (0) 2019.02.02
2. 플러터 : 텍스트 스타일 (1)  (0) 2019.02.02
1. 플러터 : 텍스트  (0) 2019.02.01
0. 플러터  (0) 2019.02.01