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,
),