카테고리 없음

3가지 이상의 기분을 담고있는 위젯을 페이징이 가능하게 만드세요.

신승호. 2023. 1. 30. 18:43

예제

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(
      home: Scaffold(
        body: SafeArea(
          child: Center(
              child: Column(                                                                               //텍스트 두개랑 기분박스를 열로 나열
                mainAxisAlignment: MainAxisAlignment.center,                         //가운데 위치하게 할거임
                children: [
                  Text('오늘의 하루는',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 50,),
                  ),
                  Text('어땠나요?',
                  style: TextStyle( fontSize: 30, color: Colors.grey,),
                  ),
                  SizedBox(                                                                                   //기분박스
                    height: 300,
                    child: PageView(                                                                          //책마냥 스크롤해서 넘길거임
                      scrollDirection: Axis.horizontal,                                               //가로로 넘길거임
                      physics: BouncingScrollPhysics(),                  //아이폰마냥 마지막에 바운스주면서 마지막페이지 알려줄거임
                      children: [
                      Container(
                        margin: EdgeInsets.all(24),           //margin으로 간격띄움
                        alignment: Alignment.center,          //가운데 위치
                        decoration: BoxDecoration(              //컨테이너 디자인
                          borderRadius: BorderRadius.all(Radius.circular(24),),       //모서리 원모양으로 깎음
                          gradient: LinearGradient(      //그라데이션
                            colors: [
                              Colors.grey,
                              Colors.white,
                            ]
                            )
                        ),
                        child: Text('피곤함', style: TextStyle(fontSize: 20, color: Colors.white),),
                      ),
                      Container(
                        margin: EdgeInsets.all(24),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(24),),
                          gradient: LinearGradient(
                            colors: [
                              Colors.indigo,
                              Colors.blue,
                            ]
                            )
                        ),
                        child: Text('왜 안되지?', style: TextStyle(fontSize: 20, color: Colors.white),),
                      ),
                      Container(
                        margin: EdgeInsets.all(24),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(24),),
                          gradient: LinearGradient(
                            colors: [
                              Colors.red,
                              Colors.orange,
                            ]
                            )
                        ),
                        child: Text('오 해냈음!!', style: TextStyle(fontSize: 20, color: Colors.white),),
                      ),
                      Container(
                        margin: EdgeInsets.all(24),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(24),),
                          gradient: LinearGradient(
                            colors: [
                              Colors.pink,
                              Colors.black38,
                            ]
                            )
                        ),
                        child: Text('기분좋아졌음ㅎㅎ', style: TextStyle(fontSize: 20, color: Colors.white),),
                      )
                      ],
                    ),
                  )
                ],
              )
          )
        ),
      ),
    );
  }