flutter(플러터) - 08-2. PageView(페이지뷰)

import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PageViewPage(),
    );
  }
}

class PageViewPage extends StatelessWidget {
  const PageViewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView'),
      ),
      body: PageView(
        children: [
          Container(
            color: Colors.red,
            child: Center(
                child: Text(
                  '1페이지',
                  style: TextStyle(fontSize: 40),
                )),
          ),
          Container(
            color: Colors.green,
            child: Center(
                child: Text(
                  '2페이지',
                  style: TextStyle(fontSize: 40),
                )),
          ),
          Container(
            color: Colors.blue,
            child: Center(
                child: Text(
                  '3페이지',
                  style: TextStyle(fontSize: 40),
                )),
          ),
        ],
      ),
    );
  }
}

ListView	PageView
연속 스크롤	페이지 단위
리스트	화면 전환
여러 개 보임	한 페이지 중심

실습예제

// import 'package:flutter/material.dart';
//
// void main() {
//   runApp(const MyApp());
// }
//
// class MyApp extends StatelessWidget {
//   const MyApp({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       debugShowCheckedModeBanner: false,
//       home: const OnboardingPage(),
//     );
//   }
// }
//
// class OnboardingPage extends StatefulWidget {
//   const OnboardingPage({super.key});
//
//   @override
//   State<OnboardingPage> createState() => _OnboardingPageState();
// }
//
// class _OnboardingPageState extends State<OnboardingPage> {
//
//   // 📌 PageView 제어 객체
//   final PageController _controller = PageController();
//
//   // 📌 현재 페이지 번호
//   int currentPage = 0;
//
//   // 📌 온보딩 데이터
//   final List<Map<String, dynamic>> pages = [
//
//     {
//       "title": "쇼핑을 쉽게",
//       "description": "원하는 상품을 빠르게 찾아보세요.",
//       "color": Colors.blue,
//       "icon": Icons.shopping_cart,
//     },
//
//     {
//       "title": "빠른 배송",
//       "description": "오늘 주문하면 내일 도착!",
//       "color": Colors.orange,
//       "icon": Icons.local_shipping,
//     },
//
//     {
//       "title": "간편 결제",
//       "description": "터치 한 번으로 결제 완료.",
//       "color": Colors.green,
//       "icon": Icons.payment,
//     },
//   ];
//
//   @override
//   Widget build(BuildContext context) {
//
//     return Scaffold(
//
//       body: SafeArea(
//
//         child: Column(
//
//           children: [
//
//             // 📌 PageView 영역
//             Expanded(
//
//               child: PageView.builder(
//
//                 controller: _controller,
//
//                 itemCount: pages.length,
//
//                 // 📌 페이지 변경 감지
//                 onPageChanged: (index) {
//                   setState(() {
//                     currentPage = index;
//                   });
//                 },
//
//                 itemBuilder: (context, index) {
//
//                   final page = pages[index];
//
//                   return Container(
//
//                     color: page["color"].withOpacity(0.1),
//
//                     child: Column(
//
//                       mainAxisAlignment: MainAxisAlignment.center,
//
//                       children: [
//
//                         Icon(
//                           page["icon"],
//                           size: 120,
//                           color: page["color"],
//                         ),
//
//                         const SizedBox(height: 40),
//
//                         Text(
//                           page["title"],
//                           style: const TextStyle(
//                             fontSize: 30,
//                             fontWeight: FontWeight.bold,
//                           ),
//                         ),
//
//                         const SizedBox(height: 20),
//
//                         Padding(
//                           padding: const EdgeInsets.symmetric(
//                             horizontal: 30,
//                           ),
//
//                           child: Text(
//                             page["description"],
//                             textAlign: TextAlign.center,
//
//                             style: const TextStyle(
//                               fontSize: 18,
//                             ),
//                           ),
//                         ),
//                       ],
//                     ),
//                   );
//                 },
//               ),
//             ),
//
//             // 📌 페이지 Indicator
//             Row(
//
//               mainAxisAlignment: MainAxisAlignment.center,
//
//               children: List.generate(
//                 pages.length,
//
//                     (index) {
//
//                   final isActive = currentPage == index;
//
//                   return AnimatedContainer(
//
//                     duration: const Duration(
//                       milliseconds: 300,
//                     ),
//
//                     margin: const EdgeInsets.all(5),
//
//                     width: isActive ? 25 : 10,
//                     height: 10,
//
//                     decoration: BoxDecoration(
//
//                       color: isActive
//                           ? Colors.black
//                           : Colors.grey,
//
//                       borderRadius:
//                       BorderRadius.circular(20),
//                     ),
//                   );
//                 },
//               ),
//             ),
//
//             const SizedBox(height: 30),
//
//             // 📌 버튼
//             Padding(
//
//               padding: const EdgeInsets.symmetric(
//                 horizontal: 20,
//               ),
//
//               child: SizedBox(
//
//                 width: double.infinity,
//
//                 child: ElevatedButton(
//
//                   onPressed: () {
//
//                     // 📌 마지막 페이지 여부
//                     final isLastPage =
//                         currentPage == pages.length - 1;
//
//                     if (isLastPage) {
//
//                       ScaffoldMessenger.of(context)
//                           .showSnackBar(
//                         const SnackBar(
//                           content: Text("시작하기 클릭"),
//                         ),
//                       );
//
//                     } else {
//
//                       // 📌 다음 페이지 이동
//                       _controller.animateToPage(
//
//                         currentPage + 1,
//
//                         duration: const Duration(
//                           milliseconds: 300,
//                         ),
//
//                         curve: Curves.easeInOut,
//                       );
//                     }
//                   },
//
//                   child: Padding(
//
//                     padding: const EdgeInsets.symmetric(
//                       vertical: 15,
//                     ),
//
//                     child: Text(
//
//                       currentPage == pages.length - 1
//                           ? "시작하기"
//                           : "다음",
//
//                       style: const TextStyle(
//                         fontSize: 18,
//                       ),
//                     ),
//                   ),
//                 ),
//               ),
//             ),
//
//             const SizedBox(height: 30),
//           ],
//         ),
//       ),
//     );
//   }
// }

// import 'package:flutter/material.dart';
//
//
// void main() {
//   runApp(const MyApp());
// }
//
// class MyApp extends StatelessWidget {
//   const MyApp({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return const MaterialApp(
//       home: PageViewPage(),
//     );
//   }
// }
//
// class PageViewPage extends StatelessWidget {
//   const PageViewPage({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: Text('PageView'),
//       ),
//       body: PageView(
//         children: [
//           Container(
//             color: Colors.red,
//             child: Center(
//                 child: Text(
//                   '1페이지',
//                   style: TextStyle(fontSize: 40),
//                 )),
//           ),
//           Container(
//             color: Colors.green,
//             child: Center(
//                 child: Text(
//                   '2페이지',
//                   style: TextStyle(fontSize: 40),
//                 )),
//           ),
//           Container(
//             color: Colors.blue,
//             child: Center(
//                 child: Text(
//                   '3페이지',
//                   style: TextStyle(fontSize: 40),
//                 )),
//           ),
//         ],
//       ),
//     );
//   }
// }

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ShortsPage(),
    );
  }
}

class ShortsPage extends StatelessWidget {
  const ShortsPage({super.key});

  @override
  Widget build(BuildContext context) {
    final videos = [
      {"title": "고양이 영상", "color": Colors.red},

      {"title": "강아지 영상", "color": Colors.blue},

      {"title": "먹방 영상", "color": Colors.green},
    ];

    return Scaffold(
      body: PageView.builder(
        // 📌 세로 스크롤
        scrollDirection: Axis.vertical,
        itemCount: videos.length,
        itemBuilder: (context, index) {
          final video = videos[index];

          return Container(
            color: video["color"] as Color,

            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,

              children: [
                // ▶ 재생 아이콘
                const Icon(
                  Icons.play_circle_fill,
                  color: Colors.white,
                  size: 100,
                ),

                const SizedBox(height: 20),
                // 제목
                Text(
                  video["title"] as String,

                  style: const TextStyle(
                    fontSize: 30,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}