[Flutter] 간단 가위바위보 앱

플러터 프로젝트를 만들어줌

 

배운거)

opt up 버튼은 커서 올라간 특정 단어 전체 선택해줌. cmd d 하면 코드 아랫줄에 복사

cmd o 하면 override method들 쭉 뜨고 거기서 init이든 어떤 state든 치면 바로 나옴.

구글 폰트 같은 것도 쓰고자 하면 펍스펙 야믈에 가서 라이브러리 추가해주면 됨.

목 작업은 프론트엔드에서 서버에서 데이터를 받아오기 전 UI를 미리 작업해놓는 걸 두고 말함.

앱바 보였다 안보였다 만드는건 visibility로 감싸서 index 값(=페이지#)에 따라 노출 시키고 감추고 할 수 있음.

or null값을 줘도 되고 방법 여러개 있는 듯.

텍스트박스 만들 때 위에 닿으면 SafeArea로 감싸자.

 

 

• main.dart 파일에서 MainApp을 RSPApp으로 바꿔주고,
  scaffold는 materialApp으로 바꿔줌 (child도 home으로 ------- 의의가 뭐지?)

import 'package:flutter/material.dart';
import 'package:part2_rsp_game_flutter/game/game_body.dart';

void main() {
  runApp(const RSPApp());
}

class RSPApp extends StatelessWidget {
  const RSPApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('가위 바위 보!')
        ),
        body: const GameBody(),
      ),
    );
  }
}

• game_body 및 각 파일(CpuInput, GameResult, UserInput) 나눠서 필요한 material import해줘야 함
• InitState 추가해줌

class _GameBodyState extends State<GameBody> {
  late bool isDone;
  
 @override
  void initState() {
    super.initState();
    isDone = false;
    setCpuInput();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: CpuInput(isDone: isDone, cpuInput: _cpuInput)),
        Expanded(child: GameResult(isDone: isDone, result: getResult(), callback: reset,)),
        Expanded(child: UserInput(isDone: isDone, callback: setUserInput, userInput: _userInput)),
      ],
    );
  }

• 각 파일별 InitState 추가 (예시)

class CpuInput extends StatelessWidget {
  final bool isDone;
  final InputType cpuInput;

  const CpuInput({required this.isDone, required this.cpuInput, super.key});

• enum파일 만들어서 가위 바위 보 저장 & 이미지 파일(assets) 생성 & pubspec.yaml에서 assets 경로 지정하여 설정

# To add assets to your application, add an assets section, like this:
assets:
  - assets/images/

• UserInput부터 작업 시작 --- 게임 진행 중일 때와 아닐 때 나눠서 개발 (그 전에 위젯 디렉토리 나눠서 기능 파일들 넣음)
  
  
• 이후 각 파일 왔다갔다 하면서 콜백함수로 서로 참조도 하고 어쨌든 만듦.
• 문제는 너무 왔다갔다 해서 머리가 아픔...

 

 

tip) 우측 메뉴에 플러터 아웃라인 참고하여 위젯을 추출할 수도 있고 개발된 사항들 확인 가능함:

 

 

이 프로젝트 takeaway는 이미지 삽입, 간단한 동작 메커니즘 등이 있음

이후 인스타그램 클론코딩은 전반적인 UI 꾸미기에 좋은 뼈대를 제공함