카테고리 없음
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),),
)
],
),
)
],
)
)
),
),
);
}