카테고리 없음

[flutter, perplexity] 게시글 작성 페이지 만들기, 날짜 선택하는 폼 만들기

뚜개 2024. 11. 14. 21:11

perlexity를 쓰면서 매번 놀라고 있다...
정말 나는 곧 필요없어 질 것 같다.
개발자 + 약간의 flutter 경험이 있다면 flutter를 chat gpt로 개발하는 건 정말 쉬울 것 같다.
개발자는 곧 구글링으로 예제를 보고 덕지덕지 개발하는 직업인데
이걸 아주아주 쉽게 해준다.
개떡같이 물어보면

flutter 에서 text, date time, text, type choice를 순서대로 할 수 있는 페이지를 만들고 싶어. 게시글 작성 페이지처럼

찰떡같이 게시글 작성 페이지를 만들어온다.
그냥 그대로 복붙해서 쓰면 ㄹㅇ 그럴 듯하다.
이제 개발자는 여기서 자기가 원하는 대로 조각해서 쓰면 된다.

아래와 같이 답변이 나왔다.

네, Flutter에서 게시글 작성 페이지와 같이 텍스트 입력, 날짜 시간 선택, 또 다른 텍스트 입력, 그리고 타입 선택을 순서대로 할 수 있는 페이지를 만드는 방법을 설명해 드리겠습니다. 다음은 이를 구현하는 예시 코드입니다

 

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class CreatePostPage extends StatefulWidget {
  @override
  _CreatePostPageState createState() => _CreatePostPageState();
}

class _CreatePostPageState extends State<CreatePostPage> {
  final _titleController = TextEditingController();
  final _contentController = TextEditingController();
  DateTime _selectedDate = DateTime.now();
  String _selectedType = '일반';
  final List<String> _types = ['일반', '공지', '이벤트'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('게시글 작성'),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [... 길어서 생략
          ],
        ),
      ),
    );
  }

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: _selectedDate,
      firstDate: DateTime(2000),
      lastDate: DateTime(2101),
    );
    if (picked != null) {
      final TimeOfDay? pickedTime = await showTimePicker(
        context: context,
        initialTime: TimeOfDay.fromDateTime(_selectedDate),
      );
      if (pickedTime != null) {
        setState(() {
          _selectedDate = DateTime(
            picked.year,
            picked.month,
            picked.day,
            pickedTime.hour,
            pickedTime.minute,
          );
        });
      }
    }
  }

  void _submitPost() {
    // 여기에 게시글 제출 로직을 구현합니다.
    print('제목: ${_titleController.text}');
    print('날짜 및 시간: ${DateFormat('yyyy-MM-dd HH:mm').format(_selectedDate)}');
    print('내용: ${_contentController.text}');
    print('유형: $_selectedType');
    // 실제로는 여기서 데이터를 서버에 전송하거나 로컬 데이터베이스에 저장할 수 있습니다.
  }

  @override
  void dispose() {
    _titleController.dispose();
    _contentController.dispose();
    super.dispose();
  }
}

 

이 코드는 다음과 같은 특징을 가지고 있습니다:

  1. 제목과 내용을 입력받는 TextField를 사용합니다.
  2. 날짜와 시간 선택을 위해 showDatePicker와 showTimePicker를 사용합니다.
  3. 게시글 유형 선택을 위해 DropdownButtonFormField를 사용합니다.
  4. SingleChildScrollView를 사용하여 키보드가 나타날 때 화면이 스크롤 가능하도록 합니다.
  5. 각 입력 필드 사이에 SizedBox를 사용하여 간격을 줍니다.
  6. 게시글 작성 버튼을 누르면 _submitPost 메서드가 호출되어 입력된 데이터를 처리합니다.

이 페이지를 사용하려면 메인 앱에서 다음과 같이 호출할 수 있습니다:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => CreatePostPage()),
);

이 구현은 기본적인 게시글 작성 페이지의 구조를 제공합니다. 실제 사용 시에는 다음과 같은 추가 작업이 필요할 수 있습니다:

  • 입력 유효성 검사
  • 서버로 데이터 전송
  • 이미지 업로드 기능
  • 더 복잡한 폼 필드 (예: 태그 입력)
  • 사용자 피드백 (예: 로딩 인디케이터, 성공/실패 메시지)

필요에 따라 이 코드를 수정하고 확장하여 사용하시면 됩니다.

네 필요에 따라 확장해서 쓰겠습니다. 감사합니다!

 

더 감동적인 것은 코드만 주고 띡이 아니라.

이 코드에 대해서 설명을 해준다는 것이다.


TextField가 어디에 쓰이는지, SingleChildScrollView는 왜 썼는지
그리고 페이지 코드만 주는게 아니라 날짜를 고를 수 있는 액션과 submit post를 할 수 있는 액션까지 함수를 파놨다.
미친 퍼플렉시티 미친넘이다.

 

마지막으로 이 페이지를 쓰려면 Navigator를 써야한다는 것까지 아주 친절하게 알려준다.
웬만한 사수보다 동료보다 좋은 거 같다.

 

여기서 나는 type을 내가 쓰는 enum으로 쓰고 싶다고 했더니
또 그거에 맞게 위 코드를 수정해줬다.
enum to text로 바꾸는 방법도 알려준다.
내가 원하지 않는 것도 막 알려주면서 꿀팁을 선사해주신다. 미친넘(좋은의미)

 

심지어 내가 수정하다가 ui error가 발생하길래 코드 그대로 주고 에러났다고 하니까
원인이랑 내가 몰랐던 오류까지 수정해줌. 그대로 쓰니까 바로 해결 되버림

내 블로그를 볼 게 아니라 gpt한테 달려가서 물어보시는게 낫다.


아무튼 설명하자면

date를 선택하려면 flutter에서는 DateTime이라는 변수가 있다.
어떤 버튼을 클릭해야 date 선택이 가능할 것이므로 버튼을 하나 만든다.
나는 아래와 같이 perplexity가 준대로 date가 뜨는 inkwell을 사용했다.

InkWell(
  onTap: () async {
    final DateTime? newDate = await _selectDate(context, _selectedCODate);
    if (newDate != null) {
      setState(() {
        _selectedCODate = newDate;
      });
    }
  },
  child: InputDecorator(
    decoration: InputDecoration(
      labelText: 'CO',
      border: OutlineInputBorder(),
    ),
    child: Text(
      DateFormat('yyyy-MM-dd').format(_selectedCODate),
    ),
  ),
),

 

그리고 _selectDate함수는 아래와 같다.

showDataPicker는 material library에 있는 기본 함수이다.
날짜 선택 가능한 dialog를 띄워준다.
async함수이기 때문에 바로 값을 받아오는 걸 원하면 await을 해줘야한다.
Future로 값을 리턴 받는다.

Future<DateTime?> _selectDate(BuildContext context, DateTime initialDate) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: initialDate,
    firstDate: DateTime(2000),
    lastDate: DateTime(2101),
  );
  if (picked != null) {
    return DateTime(
      picked.year,
      picked.month,
      picked.day,
    );
  }
  return null;
}

 

나는 2개의 날짜를 입력받을 것이었다.
시작 날짜 ~ 끝날짜
근데 끝 날짜 < 시작 날짜가 되면 안되기 때문에 그것도 물어봤다.
뇌 자아의탁 레전드

date가 2갠데 시작과 끝을 나타내야해서 co date는 fo date보다 반드시 작거나 같게 하려면 어떻게 해?

 

뭐라고 샬랴살라 길게 답변해줬는데 내가 필요한 부분은

setState(() {
        _selectedCODate = newDate;
        // CO date가 FO date보다 늦어졌다면 FO date도 함께 업데이트
        if (_selectedCODate.isAfter(_selectedFODate)) {
          _selectedFODate = _selectedCODate;
        }
      });

이 부분 하나였다.
바로 쓱 복사. 붙.여.넣.기.

 

isAfter라는 함수가 있는지 없는지 어떻게 하는지 구글링을 겁나게 할 필요없이 바로 예제코드 딱 주니까 너무 편하다.


그리고 해당 경우에 끝 날짜가 같이 업데이트 되었다는 toast를 주기위해 물어봤다.

이건 toast 어캐해? -> 윈도우에서는 안돼를 거쳐서
SnackBar를 사용했다.
예전에 다 해서 존재는 알고 있었는데 ㄹㅇ 까먹음

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a SnackBar message'),
    duration: Duration(seconds: 2),
  ),
);

저 if문 안에 넣어주면 된다.

setState(() {
        _selectedCODate = newDate;
        // CO date가 FO date보다 늦어졌다면 FO date도 함께 업데이트
        if (_selectedCODate.isAfter(_selectedFODate)) {
          _selectedFODate = _selectedCODate;
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
            content: Text('This is a SnackBar message'),
              duration: Duration(seconds: 2),
           ),
        );
        }
      });

그래서 최종적으로는 이런 구조로 완료가 된다!

하루만에 진도가 많이 나갔다 :)