패스트캠퍼스 챌린지 8일차

# 강의 제목 : 누적다운로드 120만+ 1인 개발자와 함께하는 앱 개발 입문 Online

# 강의 목표 : 기초부터 운영까지 앱 개발의 전체 프로세스를 이해한다. 
                  내 이름으로 된 앱을 최대 10개까지 만들어 출시할 수 있다. 
                  앱 개발자로 성장할 수 있는 초석을 다진다. 
                  반응 얻는 앱의 특징과 노하우를 알아간다. 
                  향후 강의 없이도 나만의 앱을 개발할수 있는 실력을 가진다. 

# 강의 요약 : 프로그램 설치부터 기본 문법, 광고 다는 법, 클론코딩을 진행하며 필수 지식을 학습한다. 
                 총 10개의 다른 주제로 실제 사용화 가능한 수준의 앱을 만들어본다.
                 나의 앱을 세상에 선보이기 위한 개발자 등록 및 배포를 진행한다. 
                 강사님의 리뷰/클레임 대응사례 등 앱 성공 포인트를 참고해 1인 개발자로서의 입지를 다진다. 

 # 강의 목차 : Flutter 실전 앱 제작
                    - 앱 기능 및 디자인 설계 및 초기 구조 만들기 
                    - TODO 화면 만들기 (8일차)
                    - TODO 화면 만들기
                    - TODO 화면 만들기  
                    - TODO 기록 화면 만들기 (내부 DB 저장, 수정, 삭제)
                    - TODO 기록 화면 만들기 (이전 할일 기록 리스트, 카테고리 별 리스트)
                    - 앱 기능 및 디자인 설계 및 초기 구조 만들기 (일기앱)
                    - 일기 작성 화면 만들기
                    - 일기 작성 화면 만들기 (이모티콘 추가)
                    - 달력 화면 만들기 
                    - 통계, 더보기 화면 만들기 
                    - Splash 스크린 추가하기 

# 강의 화면 :  

# 강의 내용 : Flutter 실전 앱 제작 (TODO 화면 만들기)

# todo.dart

class Todo {
  String title;
  String memo;
  String category;
  int color;
  int done;
  int date;

  Todo({this.title, this.memo, this.category, this.color, this.done, this.date});
}

# util.dart

class Utils {
  static int getFormatTime(DateTime date){
    return int.parse("${date.year}${makeTwoDigit(date.month)}${makeTwoDigit(date.day)}");
  }

  static DateTime numToDateTime(int date){
    String _d = date.toString();

    int year = int.parse(_d.substring(0, 4));
    int month = int.parse(_d.substring(4, 6));
    int day = int.parse(_d.substring(6, 8));

    return DateTime(year, month, day);
  }

  static String makeTwoDigit(int num){
    return num.toString().padLeft(2, "0");
  }
}

# main.dart

import 'package:flutter/material.dart';
import 'data/todo.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List<Todo> todos = [
    Todo(
      title: "온라인교육듣기1",
      memo: "앱개발 강의 듣기",
      color: Colors.redAccent.value,
      done: 0,
      category: "공부",
      date: 20210709
    ),
    Todo(
        title: "온라인교육듣기2",
        memo: "앱개발 강의 듣기",
        color: Colors.redAccent.value,
        done: 0,
        category: "공부",
        date: 20210709
    ),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(child: AppBar(),
        preferredSize: Size.fromHeight(0),
      ),
      body: ListView.builder(
          itemBuilder: (ctx, idx){
            if(idx == 0){
              return Container(
                child: Text("오늘하루"),
              );
            }else if(idx == 1){
              return Container(
                child: Column(
                  children: List.generate(todos.length, (_idx){
                    Todo t = todos[_idx];
                    return Text(t.title);
                  }),
                ),
              );
            }
            return Container();
          },
        itemCount: 4,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.today_outlined),
              label: "오늘"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind_outlined),
              label: "기록"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.more_horiz),
              label: "더보기"
          ),
        ],
      ),
    );
  }
}

# 결과 화면

# main.dart

import 'package:flutter/material.dart';
import 'data/todo.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List<Todo> todos = [
    Todo(
      title: "온라인교육듣기1",
      memo: "앱개발 강의 듣기",
      color: Colors.redAccent.value,
      done: 0,
      category: "공부",
      date: 20210709
    ),
    Todo(
        title: "온라인교육듣기2",
        memo: "앱개발 강의 듣기",
        color: Colors.redAccent.value,
        done: 0,
        category: "공부",
        date: 20210709
    ),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(child: AppBar(),
        preferredSize: Size.fromHeight(0),
      ),
      body: ListView.builder(
          itemBuilder: (ctx, idx){
            if(idx == 0){
              return Container(
                child: Text("오늘하루"),
              );
            }else if(idx == 1){
              return Container(
                child: Column(
                  children: List.generate(todos.length, (_idx){
                    Todo t = todos[_idx];
                    return Container(
                      child: Column(
                        children: [
                          Row(
                          children: [
                            Text(t.title),
                            Text(t.done == 0 ? "미완료" : "완료")
                          ],
                        ),
                        Text(t.memo)
                       ]
                      )
                    );
                  }),
                ),
              );
            }
            return Container();
          },
        itemCount: 4,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.today_outlined),
              label: "오늘"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind_outlined),
              label: "기록"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.more_horiz),
              label: "더보기"
          ),
        ],
      ),
    );
  }
}

 

# 결과 화면

 

# main.dart

import 'package:flutter/material.dart';
import 'data/todo.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List<Todo> todos = [
    Todo(
      title: "온라인교육듣기1",
      memo: "앱개발 강의 듣기",
      color: Colors.redAccent.value,
      done: 0,
      category: "공부",
      date: 20210709
    ),
    Todo(
        title: "온라인교육듣기2",
        memo: "앱개발 강의 듣기",
        color: Colors.blue.value,
        done: 0,
        category: "공부",
        date: 20210709
    ),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(child: AppBar(),
        preferredSize: Size.fromHeight(0),
      ),
      body: ListView.builder(
          itemBuilder: (ctx, idx){
            if(idx == 0){
              return Container(
                child: Text("오늘하루", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
                margin: EdgeInsets.symmetric(vertical: 12, horizontal: 20),
              );
            }else if(idx == 1){
              return Container(
                child: Column(
                  children: List.generate(todos.length, (_idx){
                    Todo t = todos[_idx];
                    return Container(
                      decoration: BoxDecoration(
                        color: Color(t.color),
                        borderRadius: BorderRadius.circular(16)
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                      margin: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(t.title, style: TextStyle(fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold),),
                              Text(t.done == 0 ? "미완료" : "완료", style: TextStyle(color: Colors.white),)
                          ],
                        ),
                        Container(height: 8),
                        Text(t.memo)
                       ]
                      )
                    );
                  }),
                ),
              );
            }
            return Container();
          },
        itemCount: 4,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.today_outlined),
              label: "오늘"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind_outlined),
              label: "기록"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.more_horiz),
              label: "더보기"
          ),
        ],
      ),
    );
  }
}

 

# 결과 화면

 

# 교육 소감

어제 오늘, 기록, 더보기 네비게이션을 만들면서 todo 앱의 기초 틀을 만드는 작업을 하였다면, 오늘은 구체적으로 오늘 할일 탭에서 구현되어야 할부분을 만들어보았다. todo.dart 에 필요한 변수들에 대한 클래스를 생성하고, 또한 별도 폴더에 Util.dart 를 만들어 향후 날짜 변환이 필요한 부분에 쓰일수 있도록 작성하였다. 오늘 탭 부분에 구현될 부분은 대부분 Main.dart 에 구현을 하였는데, widget 화면을 구성하는 부분과 각 글자 폰트의 크기 화면의 배치 등 약간은 html 에 있어서 CSS 언어와 같은 형태로 작성하면서 화면에 표시되니 재미있었다. Dart 언어를 사용해보니 바로바로 모바일 에뮬레이터로 컴파일되어 반영되고 실시간 적으로 기능을 테스트해보면서 개발을 할수 있어서 개발하는데 재미가 있다. 다만, 에뮬레이터가 비정상적으로 종료되거나 오류가 날때는 괴롭지만, 오류나는 문구도 해석하면서 고치고 제대로 동작할 때, 짜릿함도 느낄 수 있었다. 아직은 DB를 사용하지 않아 데이터를 정적으로 넣고 테스트를 하고 있지만 향후 DB를 연결하여 사용할 때 훨씬 동적으로 동작하는 앱을 만들수 있을것 같다는 생각이 들었다. 아직 flutter 다루는 솜씨가 초보자 수준이지만, 열심히 복습해서 다양한 앱을 만들고 나만의 앱을 만들수 있도록 전문가가 어여 빨리 되고 싶다.  

# 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스