Flutterr - 위젯을 드래그해서 위치 이동

오늘은 Flutter 위젯을 드래그해서 위치를 수정하는 방법을 알려드리겠습니다

교수님께서 작은 회사에 사내 어플리케이션 의뢰를 받으셔서 제작을 하게 되었습니다 ㅋㅋㅋㅋ
내가 이걸 할 수 있을까....?

요즘 또 플러터, 다트를 열심히 하고있으니 플러터로 시도를 하고는 있지만...
안될거 같으면 바로 웹뷰로 만들어야지 ㅋㅋㅋㅋ

아무튼 요청받은 어플리케이션에 필요한 기능 하나 하나씩 테스트 해가면서 제작을 해봐야겠습니다.
먼저 위젯을 드래그해서 위치를 이동시키는 기능입니다!!

예제 코드

import 'package:flutter/material.dart';

// 앱 실행
void main() {
  runApp(
    MaterialApp(home: MyApp(),)  // MaterialApp 감싸서 Context 분리
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  Offset offset = Offset(0, 0); //x,y 좌표를 가지고 있는 오프셋 객체 생성

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("드래그 연습"),
        centerTitle: true
      ),
      body: Stack( //스택 위젯을 이용해서 위젯을 겹칠 수 있도록 설정
        children: [
          Positioned( //스택의 자식 위치를 제어하는 위젯

            //오프셋 클래스 하나의 위치를 x,y로 지정
            left: offset.dx,
            top: offset.dy,

            child: GestureDetector( //제스처를 감지하는 위젯
              child: Icon(
                Icons.car_rental,
            ),
              onPanUpdate: (details){ //드래그해서 이동한 위치만큼 Offset을 수정해서 State 변경
                setState(() {
                offset=Offset(offset.dx + details.delta.dx
                    , offset.dy+details.delta.dy);
              });
            },
          ),
        ),
      ],
      ),
    );
  }
}

실행 화면

설명

Offset(), GestureDetector()를 이용해서 제작하였고 다른 클래스나 위젯도 사용해봤는데 이게 제일 간편한거 같더군요. 사실 실력이 부족해서 차이는 잘 몰라요

간단하게 위치 지정해주고 드래그할 때 위치 값 변경 후에 State 변경해주는 코드니 어렵지 않게 사용할 수 있을겁니다. 더 좋은 방식이 있다면 댓글로 알려주세요... 공부한지 2주...

아직 한국에서 플러터 코드는 생각보다 없는 듯 하네요 ㅋㅋㅋㅋ 유투브에서 영어로 된 강의 보고 따라했습니다....
이제 드래그해서 위치를 변경하는 내용도 완성했으니 다음에는 생성한 위젯을 드래그 가능하게 하고 특정 위치로 옮기면 삭제 되도록 수정 해보겠습니다!!