동화책 만들기? OnBoardingScreen with GPT.

 

 

GPT 를 이용해서 이야기를 만들고 .

Flutter 에서 OnBoarding 패키지인 smooth page indicator 를 이용해서 

동화책을 만들어 보았습니다. 

 

flutter pub add smooth_page_indicator https://pub.dev/packages/smooth_page_indicator/install

smooth_page_indicator | Flutter Package

 

gpt 가 만든 이야기

 

 

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

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

  @override
  State<OnBoardTest> createState() => _OnBoardTestState();
}

class _OnBoardTestState extends State<OnBoardTest> {
  PageController _pageController = PageController();
  int currentPage = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            onPageChanged: (i) {
              setState(() => currentPage = 1);
            },
            controller: _pageController,
            children: [
              Container(
                  child: _page('https://cdn.pixabay.com/photo/2021/11/22/14/12/christmas-6816610_640.jpg', '크리스마스의 기적 Page 1',
                      '오랜 시간 동안, 작은 마을에는 크리스마스가 다가오면 항상 눈이 내리지 않았어요. 마을 사람들은 하얀 크리스마스를 꿈꿔왔지만, 매년 실망만 하곤 했죠. 그러던 어느 해, 크리스마스 이브에 한 소년이 마을 광장에 나와서 눈을 위한 춤을 추기 시작했어요. ')),
              Container(
                  child: _page('https://cdn.pixabay.com/photo/2019/11/16/21/44/christmas-4631194_640.jpg', '크리스마스의 기적 Page 2',
                      ' 그의 순수한 마음과 열정이 하늘에 닿은 것일까요? 갑자기 구름이 몰려오더니 눈발이 흩날리기 시작했어요마을 사람들은 창밖을 보며 놀라움을 금치 못했고, 소년의 춤을 보며 함께 기뻐했어요.')),
              Container(
                  child: _page('https://cdn.pixabay.com/photo/2019/12/20/03/29/woman-4707542_640.jpg', '크리스마스의 기적 Page 3',
                      '그날 밤, 마을은 오랜만에 하얀 눈으로 뒤덮였고, 사람들은 크리스마스의 기적을 실감했죠. 그 후로, 마을 사람들은 매년 크리스마스 이브에 모여 눈을 위한 춤을 추며, 그 소년의 순수한 마음을 기억하며 크리스마스를 축하하게 되었답니다.')),
            ],
          ),

          //
          Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 32),
                child: SmoothPageIndicator(
                  controller: _pageController,
                  count: 3,
                  onDotClicked: (index) {
                    _pageController.jumpToPage(index);
                  },
                ),
              )),
          if (currentPage == 1)
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.all(64),
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => OnHomeScreen(),
                        ));
                  },
                  child: Text("Get Started"),
                ),
              ),
            ),
        ],
      ),
    );
  }

  Widget _page(String imagePath, String title, String subTitle) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        image: DecorationImage(image: NetworkImage(imagePath), fit: BoxFit.fill),
      ),
      child: Center(
        child: Container(
          width: 300,
          height: 400,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.blueAccent.withOpacity(0.3),
              borderRadius: BorderRadius.circular(25),
              border: Border.all(width: 3, color: Colors.white24),
              boxShadow: [
                BoxShadow(
                  blurRadius: 30,
                  color: Colors.black.withOpacity(0.1),
                  spreadRadius: -4,
                )
              ]),
          child: Column(
            children: [
              Text(title, style: TextStyle(fontSize: 32, color: Colors.white, fontWeight: FontWeight.bold)),
              SizedBox(
                height: 20,
              ),
              Text(subTitle,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  )),
            ],
          ),
        ),
      ),
    );
  }
  //
}

class OnHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("Home screen")),
    );
  }
}