ChatGpt 사용해서 flutter dart 코딩하기

질문

 

In flutter, horizontal listview, which when I click most left circle button, the other 5 buttons will be appear with 0.5 second animation and when I click the other buttons, the most left circle button will be change to clicked button. The other buttons is circle and indicate 5 colors.

 

답: 

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  List<Color> colors = [
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.blue,
  ];

  Color selectedColor = Colors.transparent;
  bool showColors = false;
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: [
            InkWell(
              onTap: () {
                setState(() {
                  showColors = !showColors;
                  showColors
                      ? _controller.forward()
                      : _controller.reverse();
                });
              },
              child: Container(
                width: 50.0,
                height: 50.0,
                decoration: BoxDecoration(
                  color: selectedColor,
                  shape: BoxShape.circle,
                ),
              ),
            ),
            if (showColors)
              ...colors
                  .asMap()
                  .entries
                  .map(
                    (entry) => AnimatedBuilder(
                      animation: _controller,
                      builder: (context, child) {
                        return Transform.translate(
                          offset: Offset(
                            0.0,
                            _controller.value * 100.0,
                          ),
                          child: child,
                        );
                      },
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            selectedColor = entry.value;
                            showColors = false;
                            _controller.reverse();
                          });
                        },
                        child: Container(
                          margin: EdgeInsets.only(left: 8.0),
                          width: 50.0,
                          height: 50.0,
                          decoration: BoxDecoration(
                            color: entry.value,
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                    ),
                  ),
          ],

 

 

조금의 오류나 내가 생각한 거랑 다른 부분을 수정해주었다.

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

  @override
  State<ColorPallet> createState() => _ColorPalletState();
}

class _ColorPalletState extends State<ColorPallet> {
  List<Color> colors = [
    Colors.white,
    const Color(0xFFFFB7AD),
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.brown,
    Colors.amber,
    Colors.accents[0],
    Colors.accents[1],
    Colors.accents[2],
    Colors.accents[3],
    Colors.accents[4],
    Colors.accents[5],
  ];

  Color selectedColor = Colors.grey;
  bool showColorList = false;

  @override
  void initState() {
    selectedColor = colors.first;
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return SliverPadding(
      padding: const EdgeInsets.symmetric(
        horizontal: 10,
      ),
      sliver: SliverGrid(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 6, //1 개의 행에 보여줄 item 개수
          childAspectRatio: 1, //item 의 가로 1, 세로 2 의 비율
          mainAxisSpacing: 0, //수평 Padding
          crossAxisSpacing: 0, //수직 Padding
        ),
        delegate: SliverChildListDelegate([
          InkWell(
            onTap: () {
              setState(() {
                showColorList = !showColorList;
              });
            },
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
              child: Container(
                decoration: BoxDecoration(
                    color: selectedColor,
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.grey[400]!, width: 8)),
              ),
            ),
          ),
          if (showColorList)
            ...colors.map((e) => InkWell(
                  onTap: () {
                    logger.d('selectedColor is $e');
                    setState(() {
                      selectedColor = e;
                      showColorList = false;
                    });
                  },
                  child: Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
                    child: Container(
                      // margin: const EdgeInsets.only(left: 4.0, right: 4),
                      decoration: BoxDecoration(
                        color: e,
                        shape: BoxShape.circle,
                        border: Border.all(color: Colors.grey[400]!, width: 2),
                      ),
                    ),
                  ),
                ))
        ]),
      ),
    );
  }

 

흠.. 완벽하게 답을 내놓진 않았지만 생각보다 괜찮았고, 내가 생각지 못한 코드를 알려주니 나중에도 써먹을 일이 많을 것 같다!

모두 google에서 chatGPT로 지금은 무료라고 하니 다운 받아보시길!