[Flutter] 반응형 모바일 배너 만들기(슬라이더)

Flutter로 반응형 모바일 배너 만들기(슬라이드 형식)

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Mobile App',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          appBarTheme: AppBarTheme(
            backgroundColor: Colors.white, // 기본 색상
          )),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final PageController _pageController = PageController();
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //title: Text('My Mobile App'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          color: Colors.grey,
          onPressed: () {
            // 뒤로가기 버튼 동작
          },
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: Stack(
                children: [
                  PageView(
                    controller: _pageController,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    children: [
                      buildBanner('Banner 1', 0),
                      buildBanner('Banner 2', 1),
                    ],
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      margin: EdgeInsets.symmetric(vertical: 8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          for (int i = 0; i < 2; i++)
                            Container(
                              margin: EdgeInsets.all(4.0),
                              width: 12.0,
                              height: 12.0,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: _currentPage == i
                                    ? Colors.grey
                                    : Colors.grey.withOpacity(0.5),
                              ),
                            ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 4,
              child: Column(
                children: [
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.symmetric(vertical: 8.0),
                      padding: EdgeInsets.all(8.0),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius:
                            BorderRadius.circular(10.0), // 원하는 둥근 정도를 설정합니다.
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(0.5),
                            spreadRadius: 2,
                            blurRadius: 4,
                            offset: Offset(0, 2),
                          ),
                        ],
                      ),
                      child: Text('2'),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.symmetric(vertical: 8.0),
                      padding: EdgeInsets.all(8.0),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius:
                            BorderRadius.circular(10.0), // 원하는 둥근 정도를 설정합니다.
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(0.5),
                            spreadRadius: 2,
                            blurRadius: 4,
                            offset: Offset(0, 2),
                          ),
                        ],
                      ),
                      child: Text('2'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildBanner(String text, int index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0), // 원하는 둥근 정도를 설정합니다.
        color: Colors.blueGrey,
      ),
      child: Center(child: Text(text)),
    );
  }
}

코드 설명

- `MyApp`: `MaterialApp`을 생성하여 앱의 전체 테마를 설정합니다.
- `MyHomePage`: 앱의 홈 화면을 구성하는 StatefulWidget입니다.
- `_MyHomePageState`: `MyHomePage` 위젯의 상태를 관리하는 State 클래스입니다.

앱의 구성 요소는 다음과 같습니다:

- `Scaffold`: 앱의 기본적인 뼈대를 제공합니다.
- `AppBar`: 상단 바를 나타냅니다. 뒤로가기 버튼이 있는 AppBar가 있습니다.
- `body`: 앱의 내용을 담는 영역입니다.
  - `Column`: 위젯들을 수직으로 배치하기 위한 Column입니다.
    - `Expanded`: 화면을 균일하게 분할하여 각 영역에 배치합니다.
      - `Stack`: 위젯들을 겹쳐서 배치하기 위한 Stack입니다.
        - `PageView`: 페이지를 슬라이드하여 보여주는 PageView입니다. 두 개의 배너 페이지가 있습니다.
        - `Align`: 하단 중앙에 배너 페이지 인덱스를 나타내는 동그라미를 배치합니다.
    - `Column`: 위젯들을 수직으로 배치하기 위한 Column입니다.
      - `Expanded`: 나머지 공간을 균일하게 분할하여 각 영역에 배치합니다.
        - `Container`: 왼쪽 반 영역을 나타내는 Container입니다. 그림자 효과와 텍스트 '2'가 있습니다.
      - `Expanded`: 나머지 공간을 균일하게 분할하여 각 영역에 배치합니다.
        - `Container`: 오른쪽 반 영역을 나타내는 Container입니다. 그림자 효과와 텍스트 '2'가 있습니다.