[2021 모각코] 5회차 (2021.01.18.)

학습 목표

: Flutter에서 사용할 Dart 언어를 추가 학습하고 Figma를 통해 만들어뒀던 UI/UX를 실제로 구현해본다.

 

학습 내용

타임캡슐 작성 화면 구성

기능 구현은 다음 회차에서 할 계획이므로 이번 회차에서는 UI/UX를 중심으로 코드를 작성하였다.

 

appBar: AppBar(
    title: const Text(
      '나의 타임캡슐',
      style: TextStyle(
          color: Colors.black54, fontFamily: 'DUNGGEUNMO', fontSize: 20.0),
      textAlign: TextAlign.left,
    ),
    leading: IconButton(
      icon: Icon(
        Icons.arrow_back_ios,
        color: Colors.black54,
      ),
      onPressed: () {
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => MainPage()));
      },
    ),
    backgroundColor: Colors.transparent,
    elevation: 0.0,
 ),

앱의 상단바를 '나의 타임캡슐'이라는 글자와 뒤로가기 아이콘으로 구성하고, 해당 아이콘을 눌렀을 때 메인페이지로 돌아가도록 onPressed를 통해 정의함. style과 color를 통해 글씨체나 글자, 아이콘의 색상을 정의함

 

Container(
   padding: EdgeInsets.only(top: 15, bottom: 15),
        child: TextFormField(
          style: TextStyle(
              color: Colors.black54,
              fontSize: 15,
              fontFamily: 'DUNGGEUNMO'),
          cursorColor: Colors.brown,
          controller: _nameController,
          decoration: const InputDecoration(
            fillColor: Colors.white24,
            filled: true,
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              borderSide: BorderSide(width: 1, color: Colors.black54),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              borderSide: BorderSide(width: 1, color: Colors.black54),
            ),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
            ),
            labelText: '타임캡슐의 이름은 무엇인가요?',
            labelStyle: TextStyle(
                color: Colors.black54, fontFamily: 'DUNGGEUNMO'),
            hintStyle: TextStyle(
                color: Colors.black54, fontFamily: 'DUNGGEUNMO'),
    	),
	),
),
Container(
	padding: const EdgeInsets.only(bottom: 15),
        child: TextFormField(
          style: TextStyle(
              color: Colors.black54,
              fontSize: 15,
              fontFamily: 'DUNGGEUNMO'),
          minLines: 1,
          maxLines: 10,
          cursorColor: Colors.brown,
          controller: _contentController,
          decoration: const InputDecoration(
            fillColor: Colors.white24,
            filled: true,
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              borderSide: BorderSide(width: 1, color: Colors.black54),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              borderSide: BorderSide(width: 1, color: Colors.black54),
            ),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
            ),
            contentPadding:
                EdgeInsets.symmetric(vertical: 40, horizontal: 15),
            labelText: '캡슐에 저장할 이야기를 남겨주세요',
            labelStyle: TextStyle(
                color: Colors.black54, fontFamily: 'DUNGGEUNMO'),
            hintStyle: TextStyle(
                color: Colors.black54, fontFamily: 'DUNGGEUNMO'),
      	),
    ),
),

TextFormField를 통해 사용자로부터 타임캡슐의 이름과 내용을 받을 수 있도록 하고,  style, border, color등을 사용해 텍스트필드의 외곽선, 폰트, 색상등을 지정함

 

Container(
    padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
    margin: EdgeInsets.only(bottom: 30),
    alignment: Alignment(0.0, 0.0),
    child: _image == null
        ? FloatingActionButton(
            child: Icon(
              Icons.add_a_photo,
              color: Colors.white,
            ),
            elevation: 0.0,
            backgroundColor: const Color(0xFFD8CDAC),
            splashColor: Colors.orange,
            onPressed: _getImage,
          )
        : Image.file(File(_image!.path)),
    decoration: BoxDecoration(
      color: Colors.black54,
      borderRadius: BorderRadius.circular(5),
    ),
),

_image가 아무것도 선택되지 않았을 경우에는 카메라 아이콘 버튼을 화면에 띄우도록 함. 이 버튼은 splashColor을 통해 해당 버튼을 터치했을 때 배경 색상이 주황색으로 바뀌도록 설정함. onPressed에서 이 버튼이 터치 되었을 때 _getImage라는 함수를 실행하여 이미지를 가져오도록 설정해두었으나 이 또한 다음 회차에서 추가할 부분이므로 남겨둠. _getImage를 통해 이미지가 선택되었을 경우에는 카메라 아이콘 버튼 대신 선택된 이미지를 화면에 띄우도록 함

 

학습후기

: 웹의 프론트 뿐만이 아니라 앱의 UI/UX를 구성하는 것도 꽤나 재미있다는 것을 새삼 다시 느끼게 되었다. 새로 학습한 언어이다보니 확실히 처음 개발을 시작할 때 어떻게 시작해야할지 막막함은 있었으나 에뮬레이터를 통해 확인하면서 코드를 작성하다보니 진행은 더디더라도 실제로 작동하는 앱을 만들고 있다는 실감이 조금씩 나기 시작해서 즐겁게 코드를 작성할 수 있었다.