Flutter (20) Calling UI

FirstOnboarding

• 앱을 처음 시작했을 때 보이는 온보딩 페이지의 디자인은 다음과 같다
  
• 먼저 새로운 플러터 프로젝트를 시작한다
• 첫 페이지의 회원가입 부분을 FirstOnboardind 페이지로 지정하고 이를 stateless widget으로 만든다
• scaffold의 body를 container로 반환하고 그 안에 세로인 column으로 위젯들을 엮어서 리턴
  

• Text 위젯으로 리플로우 로고 띄우기
• Icon 위젯으로 회원가입 전에 보이는 사용자 프로필 그리기
• Textbutton 위젯으로 회원가입 버튼 만들기
  • onpressed 안에는 버튼을 눌렀을 때 어떤 행동을 취할 것인지 써야 하는데, 이는 추후에 다른 페이지를 만들고 네비게이터 추가
• 구현 화면
  
• firstonboarding.dart

  import 'package:callingapp/onboarding/second.dart';
  import 'package:flutter/material.dart';
  
  class FirstOnboarding extends StatelessWidget {
    const FirstOnboarding({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(vertical: 100),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "LIFLOW",
                style: TextStyle(
                  fontWeight: FontWeight.w900,
                  fontSize: 50,
                  color: Colors.indigo
                ),
              ),
              Text("\n\n"),
              Icon(Icons.person, size: 150,),
              Text("\n\n"),
              TextButton(
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => SecondOnboarding()));
                  },
                  child: Text(
                    "회원가입",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 25,
                      color: Colors.blue
                    ),
                  ),)
            ],
          ),
        ),
      );
    }
  }

• 의문점 회원가입 버튼만 있고 왜 로그인 버튼 없는지 회원가입 후에 무슨 정보를 입력하고 어떤 회원가입을 진행하는지
  

SecondOnboarding

• 리플로우의 말벗 찾기 기능으로 옮겨질 메뉴판들이 보이는 페이지를 구현하기 위해 새로운 페이지 생성
  

• 첫 번째 온보딩 페이지에서 회원가입 누르면 해당 페이지로 이동할 수 있도록 네비게이터 생성하기
  

• Container에 Column으로 엮어서 위젯 그리기
  

  

  • 현재 모든 버튼을 누르면 (onPressed) SecondOnboarding 페이지로 이동하게 되어 있지만 추후에 페이지를 추가로 구성하면 버튼에 맞는 페이지로 이동할 수 있도록 수정

• secondonboarding.dart

  import 'package:flutter/material.dart';
  
  class SecondOnboarding extends StatefulWidget {
    const SecondOnboarding({Key? key}) : super(key: key);
  
    @override
    State<SecondOnboarding> createState() => _SecondOnboardingState();
  }
  
  class _SecondOnboardingState extends State<SecondOnboarding> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(vertical: 100),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Text(
                "LIFLOW",
                style: TextStyle(
                    fontWeight: FontWeight.w900,
                    fontSize: 50,
                    color: Colors.indigo
                ),
              ),
              Text("\n\n"),
              Container(
                width: 350,
                height: 200,
                margin: const EdgeInsets.all(10.0),
                padding: const EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 3,
                    color: Colors.indigo,
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: TextButton(
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => SecondOnboarding()));
                  },
                  child: Text(
                    "말벗 찾기",
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 25,
                        color: Colors.indigo
                    ),
                  ),
                ),
              ),
              Container(
                width: 350,
                height: 100,
                alignment: Alignment.center,
                margin: const EdgeInsets.all(10.0),
                padding: const EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 3,
                    color: Colors.indigo,
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: TextButton(
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => SecondOnboarding()));
                  },
                  child: Text(
                    "즐겨찾기",
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 25,
                        color: Colors.indigo
                    ),
                  ),
                ),
              ),
              Container(
                width: 350,
                height: 100,
                alignment: Alignment.center,
                margin: const EdgeInsets.all(10.0),
                padding: const EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 3,
                    color: Colors.indigo,
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: TextButton(
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => SecondOnboarding()));
                  },
                  child: Text(
                    "통계",
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 25,
                        color: Colors.indigo
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    }
  }

• 구현 화면
  

  • 의문점 카드 크기를 통일하는 게 낫지 않나?
    

FindingPage

• 말벗 찾기 기능을 이용하기 위해 finding page 생성
  

• 키워드를 받아서 container에 실어 카드 형태로 반환하는 위젯 생성하기
  

  • 해당 그림에 나타나는 부분
    
  • String 형태의 keyword parameter를 받아서 해당 키워드를 텍스트로 써서 반환하는 keywordcard 위젯 생성
  • width, length, padding, alignment 를 통해 카드 사이즈와 정렬을 재구성
  • border의 박스 데코레이션을 통해 둥글둥글한 형태로 반환
  • 추후에 onpressed 버튼을 누르면 버튼 모양이 바뀌도록 코드 수정 예정

• 키워드 카드를 row로 두 개 엮은 행을 column으로 엮어서 격자 모양으로 보일 수 있도록 그리기
  

• findingpage.dart

  import 'package:flutter/material.dart';
  
  class FindingPage extends StatefulWidget {
    const FindingPage({Key? key}) : super(key: key);
  
    @override
    State<FindingPage> createState() => _FindingPageState();
  }
  
  class _FindingPageState extends State<FindingPage> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(vertical: 100),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Text(
                "오늘의 관심사 (중복 가능)                    ",
                style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 23,
                    color: Colors.black
                ),
              ),
              Column(
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      keywordcard(keyword: '경제',),
                      keywordcard(keyword: '건강',),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      keywordcard(keyword: '문화',),
                      keywordcard(keyword: '여가',),
                    ],
                  ),
                  keywordcard(keyword: '종교')
                ],
              ),
              Text('\n'),
              Text(
                "오늘의 관심사 (중복 가능)                    ",
                style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 23,
                    color: Colors.black
                ),
              ),
              Column(
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      keywordcard(keyword: '조용한',),
                      keywordcard(keyword: '외향적인',),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      keywordcard(keyword: '밝은',),
                      keywordcard(keyword: '재미있는',),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      keywordcard(keyword: '차분한',),
                      keywordcard(keyword: '믿음직한',),
                    ],
                  ),
                ],
              ),
              Container(
                width: 185,
                height: 65,
                alignment: Alignment.center,
                margin: const EdgeInsets.all(3.0),
                padding: const EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: Colors.indigo,
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: TextButton(
                  onPressed: () {
                  },
                  child: Text(
                    "등록 완료하기",
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 20,
                        color: Colors.white
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    }
  }
  
  class keywordcard extends StatelessWidget {
    final String keyword;
  
    const keywordcard({
      Key? key,
      required this.keyword,
    }) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Container(
        width: 185,
        height: 67,
        alignment: Alignment.center,
        margin: const EdgeInsets.all(2.0),
        padding: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          border: Border.all(
            width: 3,
            color: Colors.indigo,
          ),
          borderRadius: BorderRadius.circular(30.0),
        ),
        child: TextButton(
          onPressed: () {
          },
          child: Text(
            keyword,
            style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 20,
                color: Colors.indigo
            ),
          ),
        ),
      );
    }
  }

• 의문점

  두 번째 카테고리에 오늘의 관심사보다 오늘의 기분이 더 맞지 않을지!!
  

Recommand Page

• 키워드에 맞는 말벗 추천해 주는 페이지

• 추천으로 넘어가기 전에 waiting page 구현을 위해 파일 생성
  

  • 아래 그림과 같은 페이지 구현
    

• findingpage에서 등록 완료하기 버튼을 눌렀을 때 waitingpage로 이동할 수 있도록 네비게이터 생성
  

• 안내문을 줄 단위로 작성할 위젯 생성하기
  

• 해당 위젯을 column으로 엮고 container에 border decoration 설정하여 구분선 그리기
  

• waiting.dart

  import 'package:flutter/material.dart';
  
  class WaitingPage extends StatelessWidget {
    const WaitingPage({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body:
          Container(
            padding: const EdgeInsets.only(left: 50, right: 50, top: 100, bottom: 100),
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                border: Border.all(
                  width: 3,
                  color: Colors.indigo,
                ),
                borderRadius: BorderRadius.circular(30.0),
              ),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
                 notice(line: '제공자'),
                 notice(line: '전화를 희망하시면'),
                 notice(line: '우측 하단의'),
                 notice(line: '좋아요를'),
                 notice(line: '눌러 주세요'),
                 notice(line: ' '),
                 notice(line: '연결을 위하여'),
                 notice(line: '일정 시간이'),
                 notice(line: '소요될 수 있습니다'),
                 notice(line: ' '),
                 notice(line: '(아무 곳이나 누르세요)'),
               ],
             ),
            ),
          )
      );
    }
  }
  
  class notice extends StatelessWidget {
    final String line;
    const notice({
      Key? key,
      required this.line
    }) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return TextButton(
        onPressed: () {
        },
        child: Center(
          child: Text(
            line,
            style: TextStyle(
                fontWeight: FontWeight.w700,
                fontSize: 20,
                color: Colors.black,
            ),
          ),
        ),
      );
    }
  }

• 구현 화면
  

  • 의문점 아무곳이나 누르는 것보다 다음 단계로 가기를 누르는 게 더 정확한 유아이가 아닌가?
    

• 누를 때마다 다음 추천 페이지로 이동할 수 있도록 네비게이터 생성
  

• 제공자를 추천하는 ServicePage 생성하기
  

• 아래의 페이지 구현
  

• 이런 사람은 어때요 부분을 구현하기 위해서 container와 text를 column과 row로 엮어서 나열하기
  

  

  • 까만 부분에 프로필 삽입
  • 빨간 부분에 특징 삽입

• textstyle과 border decoration으로 디테일한 설정값 마치기 (글자 크기, 두께, 박스가 둥글거리는 정도)
  

  

• 프로필에 이미지 사진을 첨가하기 위해 assets 파일 생성

• 해당 폴더에 파일별로 이미지를 정리
  

• pubyaml파일에서 assets에 대한 접근성을 허용한 뒤 pub get
  

• 프로필 넣는 container에 image 삽입
  

  

• 이런 사람입니다 페이지 구현을 위해 container 세 개를 엮어 원 모양으로 된 위젯을 row 형태로 반환하기
  

  

• 같은 형식으로 container 세 개를 row로 엮은 위젯을 반환하고 양쪽 끝에는 추천과 비추천 아이콘을 삽입
  

  

• findingpage.dart에서 등록 완료하기 버튼과 동일한 형식으로 textbutton 생성
  

  

• service.dart

  import 'package:flutter/material.dart';
  
  class ServiceOne extends StatefulWidget {
    const ServiceOne({Key? key}) : super(key: key);
  
    @override
    State<ServiceOne> createState() => _ServiceOneState();
  }
  
  class _ServiceOneState extends State<ServiceOne> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(vertical: 100),
          child: Column(
            children: <Widget>[
              Text("이런 사람은 어때요?",
                style: TextStyle(
                    fontWeight: FontWeight.w900,
                    fontSize: 25,
                    color: Colors.black
                ),),
              Container(
                padding: EdgeInsets.all(20),
                height: 200,
                child: Row(
                  children: <Widget>[
                    Container(
                      child: Image.asset('assets/images/profile_two.png'),
                      decoration: BoxDecoration(
                        border: Border.all(
                          width: 5,
                          color: Colors.indigo,
                        ),
                        borderRadius: BorderRadius.circular(50.0),
                      ),
                      width: 160,
                      height: 160,
                    ),
                    Container(
                      margin: const EdgeInsets.all(30),
                      child:
                        Text("23/여\n\n고민 상담\n\n자격증 미보유",
                          style: TextStyle(
                              fontWeight: FontWeight.w900,
                              fontSize: 15,
                              color: Colors.black
                          ),
                        ),
                    )
                  ],
                ),
              ),
              Text("이런 사람입니다!                             ",
                style: TextStyle(
                    fontWeight: FontWeight.w900,
                    fontSize: 25,
                    color: Colors.black
                ),),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    alignment: Alignment.center,
                    child: Text("활발한",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          color: Colors.black
                      ),),
                    margin: const EdgeInsets.all(10),
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 15,
                        color: Colors.indigo,
                      ),
                      borderRadius: BorderRadius.circular(70.0),
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    child: Text("친절한",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          color: Colors.black
                      ),),
                    margin: const EdgeInsets.all(10),
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 15,
                        color: Colors.indigo,
                      ),
                      borderRadius: BorderRadius.circular(70.0),
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    child: Text("따뜻한",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          color: Colors.black
                      ),),
                    margin: const EdgeInsets.all(10),
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 15,
                        color: Colors.indigo,
                      ),
                      borderRadius: BorderRadius.circular(70.0),
                    ),
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    alignment: Alignment.center,
                    child: Icon(Icons.thumb_up_alt_rounded, size: 80, color: Colors.indigo,),
                    margin: const EdgeInsets.all(10),
                    width: 100,
                    height: 100,
                  ),
                  Container(
                    alignment: Alignment.center,
                    margin: const EdgeInsets.all(10),
                    width: 100,
                    height: 100,
                  ),
                  Container(
                    alignment: Alignment.center,
                    child: Icon(Icons.thumb_down_alt_rounded, size: 80, color: Colors.indigo,),
                    margin: const EdgeInsets.all(10),
                    width: 100,
                    height: 100,
                  )
                ],
              ),
              Container(
                width: 350,
                height: 65,
                alignment: Alignment.center,
                margin: const EdgeInsets.all(3.0),
                padding: const EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: Colors.indigo,
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: TextButton(
                  onPressed: () {},
                  child: Text(
                    "추천 중단하기",
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 20,
                        color: Colors.white
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    }
  }

• 의문점

  이런 사람은 어때요와 이런 사람입니다 정렬을 굳이 안 맞추는 이유가 뭔지

  사용자에게 엄지 아이콘과 추천 중단하기 중 엄지 아이콘이 전화 걸리는 기능이라고 인식될 가능성

  추천 중단하기는 시스템 종료 느낌이지 않나 싶음