flutter(플러터) - 08-3. GridView(페이지뷰)

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: GridViewExample());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("GridView")),

      body: GridView.builder(
        // 📌 아이템 개수
        itemCount: 20,
        // 📌 Grid 설정
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          // 한 줄 개수
          crossAxisCount: 2,
          // 가로 간격
          crossAxisSpacing: 10,
          // 세로 간격
          mainAxisSpacing: 10,
        ),

        itemBuilder: (context, index) {
          return Container(
            color: Colors.blue,

            child: Center(
              child: Text(
                "$index",

                style: const TextStyle(fontSize: 30, color: Colors.white),
              ),
            ),
          );
        },
      ),
    );
  }
}

FixedCrossAxisCount	MaxCrossAxisExtent
개수 고정	크기 기준
항상 동일	자동 반응형
단순	실무 친화적

실습예제

// 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: GridViewExample());
//   }
// }
//
// class GridViewExample extends StatelessWidget {
//   const GridViewExample({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(title: const Text("GridView")),
//
//       body: GridView.builder(
//         // 📌 아이템 개수
//         itemCount: 20,
//         // 📌 Grid 설정
//         gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
//           // 한 줄 개수
//           crossAxisCount: 2,
//           // 가로 간격
//           crossAxisSpacing: 10,
//           // 세로 간격
//           mainAxisSpacing: 10,
//         ),
//
//         itemBuilder: (context, index) {
//           return Container(
//             color: Colors.blue,
//
//             child: Center(
//               child: Text(
//                 "$index",
//
//                 style: const TextStyle(fontSize: 30, color: Colors.white),
//               ),
//             ),
//           );
//         },
//       ),
//     );
//   }
// }

//
// // ```dart
// 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,
//
//       theme: ThemeData(useMaterial3: true),
//
//       home: const ShoppingPage(),
//     );
//   }
// }
//
// class ShoppingPage extends StatelessWidget {
//   const ShoppingPage({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     // 📌 상품 데이터
//     final products = [
//       {
//         "title": "Nike Shoes",
//         "price": "₩120,000",
//         "image": "https://images.unsplash.com/photo-1542291026-7eec264c27ff",
//       },
//
//       {
//         "title": "Headphones",
//         "price": "₩89,000",
//         "image": "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
//       },
//
//       {
//         "title": "Coffee",
//         "price": "₩5,000",
//         "image": "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085",
//       },
//
//       {
//         "title": "Camera",
//         "price": "₩650,000",
//         "image": "https://images.unsplash.com/photo-1516035069371-29a1b244cc32",
//       },
//
//       {
//         "title": "Watch",
//         "price": "₩220,000",
//         "image": "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
//       },
//
//       {
//         "title": "Backpack",
//         "price": "₩49,000",
//         "image": "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee",
//       },
//     ];
//
//     return Scaffold(
//       appBar: AppBar(title: const Text("Shopping Mall"), centerTitle: true),
//
//       body: Padding(
//         padding: const EdgeInsets.all(10),
//
//         child: GridView.builder(
//           itemCount: products.length,
//
//           // 📌 Grid 설정
//           gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
//             crossAxisCount: 2,
//             crossAxisSpacing: 10,
//             mainAxisSpacing: 10,
//             childAspectRatio: 0.7,
//           ),
//
//           itemBuilder: (context, index) {
//             final product = products[index];
//
//             return Card(
//               elevation: 5,
//
//               shape: RoundedRectangleBorder(
//                 borderRadius: BorderRadius.circular(20),
//               ),
//
//               clipBehavior: Clip.antiAlias,
//
//               child: Column(
//                 crossAxisAlignment: CrossAxisAlignment.start,
//
//                 children: [
//                   // 📌 상품 이미지
//                   Expanded(
//                     child: Image.network(
//                       product["image"]!,
//                       width: double.infinity,
//                       fit: BoxFit.cover,
//                     ),
//                   ),
//
//                   Padding(
//                     padding: const EdgeInsets.all(12),
//                     child: Column(
//                       crossAxisAlignment: CrossAxisAlignment.start,
//
//                       children: [
//                         // 📌 상품명
//                         Text(
//                           product["title"]!,
//                           style: const TextStyle(
//                             fontSize: 18,
//                             fontWeight: FontWeight.bold,
//                           ),
//                         ),
//
//                         const SizedBox(height: 5),
//
//                         // 📌 가격
//                         Text(
//                           product["price"]!,
//                           style: const TextStyle(
//                             fontSize: 16,
//                             color: Colors.red,
//                           ),
//                         ),
//                       ],
//                     ),
//                   ),
//                 ],
//               ),
//             );
//           },
//         ),
//       ),
//     );
//   }
// }

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: GridViewExample());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("GridView")),

      body: GridView.builder(
        // 📌 아이템 개수
        itemCount: 20,
        // 📌 Grid 설정
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          // 한 줄 개수
          crossAxisCount: 2,
          // 가로 간격
          crossAxisSpacing: 10,
          // 세로 간격
          mainAxisSpacing: 10,
        ),

        itemBuilder: (context, index) {
          return ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: Image.network(
              // 랜덤 이미지
              "https://picsum.photos/300/300?random=$index",
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    );
  }
}