플러터 부트 챌린지 2기 0일차

Flutter 카카오 오픈 채팅방에서 홍보를 하시길래 이참에 참여하기로 하였다.

 

기본 가입금은 3만원이고 10일차의  챌린지를 진행하는동안 문제 수마다 환급해주는 방식이다.(따라서 전부 풀면 꽁짜로 스터디에 참여하는거다)

 

0일차 기본 문제는 쉬워서 생략하고자한다 

0일차 심화 문제

https://dartpad.dev/?id=66564598386b163f643a6260495fb00f

DartPad

 

import 'dart:math';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int square = 0;
  int circle = 0;
  bool mode = true;
  bool isDragging = false;
  void random() {
    int number = Random().nextInt(2);

    if (number == 0) {
      mode = true;
    } else {
      mode = false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const Icon(Icons.home),
        title: const Text('Hello Flutter'),
        centerTitle: true,
        actions: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              decoration: const BoxDecoration(
                  color: Colors.black87,
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: const Padding(
                padding: EdgeInsets.all(2.0),
                child: Icon(
                  Icons.question_mark_rounded,
                  color: Colors.white,
                  size: 20,
                ),
              ),
            ),
          )
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                DragTarget<int>(
                  builder: (
                    BuildContext context,
                    List<dynamic> accepted,
                    List<dynamic> rejected,
                  ) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5),
                            border: Border.all(
                              color: Colors.black,
                              width: 2,
                            ),
                          ),
                          height: 100.0,
                          width: 100.0,
                          child: Center(
                            child: Text(square.toString()),
                          ),
                        ),
                      ],
                    );
                  },
                  onAccept: (int data) {
                    setState(() {
                      if (mode) {
                        square += data;
                        random();
                      }
                    });
                  },
                ),
                const SizedBox(
                  width: 100,
                ),
                DragTarget<int>(
                  builder: (
                    BuildContext context,
                    List<dynamic> accepted,
                    List<dynamic> rejected,
                  ) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.black,
                              width: 2,
                            ),
                          ),
                          height: 100.0,
                          width: 100.0,
                          child: Center(
                            child: Text(circle.toString()),
                          ),
                        ),
                      ],
                    );
                  },
                  onAccept: (int data) {
                    setState(() {
                      if (!mode) {
                        circle += data;
                        random();
                      }
                    });
                  },
                ),
              ],
            ),
            const SizedBox(
              height: 30,
            ),
            Draggable<int>(
              data: 1,
              onDragStarted: () {
                setState(() {
                  isDragging = true;
                });
              },
              onDraggableCanceled: (_, __) => setState(() {
                isDragging = false;
              }),
              onDragCompleted: () {
                setState(() {
                  isDragging = false;
                });
              },
              feedback: DefaultTextStyle(
                style: const TextStyle(
                  fontSize: 14.0,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
                child: mode
                    ? Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          border: Border.all(
                            color: Colors.black,
                            width: 2,
                          ),
                        ),
                        height: 100.0,
                        width: 100.0,
                        child: const Center(
                          child: Text('Drag Me!'),
                        ),
                      )
                    : Container(
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(
                            color: Colors.black,
                            width: 2,
                          ),
                        ),
                        height: 100.0,
                        width: 100.0,
                        child: const Center(
                          child: Text('Drag Me!'),
                        ),
                      ),
              ),
              child: isDragging
                  ? const SizedBox(
                      height: 100.0,
                      width: 100.0,
                    )
                  : mode
                      ? Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5),
                            border: Border.all(
                              color: Colors.black,
                              width: 2,
                            ),
                          ),
                          height: 100.0,
                          width: 100.0,
                          child: const Center(
                            child: Text('Drag Me!'),
                          ),
                        )
                      : Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.black,
                              width: 2,
                            ),
                          ),
                          height: 100.0,
                          width: 100.0,
                          child: const Center(
                            child: Text('Drag Me!'),
                          ),
                        ),
            )
          ],
        ),
      ),
    );
  }
}

 

 

하단에서 사각형, 원형의 도형이 랜덤 생성되고 모양에 알맞게 드래그를 하면 1점씩 올라가는 방식이다

 

고려해야할 점으로는 

1.드래그 시작 시 이전 위치 지워주기

2.드래그 완료 시 위젯 재생성

3.드래그 취소 시 위젯 재생성

 

Draggable Widget은 아에 처음 접해봐서 생각보다 어려운 문제였다.

 

회사 출퇴근도 하고 운동도하고 개인프로젝트로 Flutter, Nodejs도 진행하고 이번에 스터디까지 참여하고 있다...

 

파이팅!!