Flutter Instagram Clone #5 Create UI 작성

jakeseo_me·2020년 7월 23일
0

Flutter-Instagram-Clone

목록 보기
5/14

Flutter Instagram Clone #5 Create UI 작성

원본 강의

https://www.inflearn.com/course/flutter-%EC%9E%85%EB%AC%B8/dashboard

여기서 유료 결제를 해서 듣고있는 강의의 내용을 개인적인 공부 목적으로 지식 위주로 정리해봅니다.

화면 설계

이전과 같이 화면설계에서는 어떤 클래스를 사용할지 미리 정하는데, 이번에는 강의를 안보고 혼자 한번 구성해보려고 한다.

새 게시물 페이지를 먼저 만들어보자.

여기까지 비슷하게 만들었는데, 내용을 입력하세요가 담긴 Input 은 어떻게 만드는지 모르겠으니 영상을 보고 완성해보자.

코드

import 'package:flutter/material.dart';

class CreatePage extends StatefulWidget {
  
  _CreatePageState createState() => _CreatePageState();
}

class _CreatePageState extends State<CreatePage> {
  final textEditingController = TextEditingController();

  
  void dispose() {
    // 사라질 때 제거
    // TODO: implement dispose
    textEditingController.dispose();
    super.dispose();
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      floatingActionButton: _buildFloatingActionButton(),
      body: _buildBody(),
    );
  }

  Widget _buildAppBar() {
    return AppBar(
      title: Text('새 게시물', style: TextStyle(fontWeight: FontWeight.bold)),
      centerTitle: true,
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.send),
          onPressed: () {},
        )
      ],
    );
  }

  Widget _buildBody() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text('No Image'),
          TextField(
            controller: textEditingController,
            decoration: InputDecoration(hintText: '내용을 입력하세요.'),
          )
        ],
      ),
    );
  }

  Widget _buildFloatingActionButton() {
    return FloatingActionButton(
      child: Icon(Icons.add_a_photo),
      backgroundColor: Colors.blue,
    );
  }
}

위와 같이 나오는데, 대부분은 배웠던 것이고, TextField라는 것은 처음 나왔다. TextField는 사용자가 입력한 텍스트를 갖고있는다. 그런데, 좀 특이하게 얘는 클래스가 시작할 때 TextEditingController라는 클래스를 controller 파라미터에 넣어줘야 하고, dispose 콜백 함수에서 TextEditingControllerdispose해주어야 한다. 그리고, 만일 place holder를 넣고싶다면, decoration 파라미터에서 InputDecoration을 넣고, hintText에 넣고싶은 텍스트를 넣어주면 된다.

최종결과

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글