|
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
final dummyItems = [
'https://cdn.pixabay.com/photo/2018/11/12/18/44/thanksgiving-3811492_1280.jpg',
'https://cdn.pixabay.com/photo/2019/10/30/15/33/tajikistan-4589831_1280.jpg',
'https://cdn.pixabay.com/photo/2019/11/25/16/15/safari-4652364_1280.jpg',
];
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.white, // 전체 테마 색상 변경
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _index = 0; // 페이지 인덱스
var _pages = [
Page1(),
Page2(),
Page3(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white, // 배경색
title: Text(
"복잡한 UI",
style: TextStyle(
color: Colors.black, // 글자색
),
),
centerTitle: true, // 제목을 가운데
actions: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.add,
color: Colors.black,
),
),
],
),
body: _pages[_index],
bottomNavigationBar: BottomNavigationBar(
onTap: (index) {
setState(() {
_index = index; // 선택된 탭의 인덱스로 _index 변경
});
},
currentIndex: _index, // 선택된 인덱스
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '홈',
),
BottomNavigationBarItem(
icon: Icon(Icons.assignment),
label: '이용서비스',
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
label: '내 정보',
),
],
),
);
}
}
class Page1 extends StatelessWidget {
const Page1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
children: [
_buildTop(),
_buildMiddle(),
_buildBottom(),
],
);
}
}
Widget _buildTop() {
return Padding(
padding: const EdgeInsets.only(
top: 20,
bottom: 20,
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
// 눌러지는효과 확인 안됨
onTap: () {
print("클릭");
},
child: Column(
children: [
Icon(
Icons.local_taxi,
size: 40,
),
Text("택시"),
],
),
),
InkWell(
// 눌러지는효과 확인
onTap: () {
print("클릭");
},
child: Column(
children: [
Icon(
Icons.local_taxi,
size: 40,
),
Text("블랙"),
],
),
),
Column(
children: [
Icon(
Icons.local_taxi,
size: 40,
),
Text("바이크"),
],
),
Column(
children: [
Icon(
Icons.local_taxi,
size: 40,
),
Text("대리"),
],
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Icon(
Icons.local_taxi,
size: 40,
),
Text("택시"),
],
),
Column(
children: [
Icon(
Icons.local_taxi,
size: 40,
),
Text("블랙"),
],
),
Column(
children: [
Icon(
Icons.local_taxi,
size: 40,
),
Text("바이크"),
],
),
Opacity(
opacity: 0.0, // 투명
child: Column(
children: [
Icon(
Icons.local_taxi,
size: 40,
),
Text("대리"),
],
),
),
],
),
],
),
);
}
Widget _buildMiddle() {
return CarouselSlider(
options: CarouselOptions(
height: 150, // 높이
autoPlay: true, // 자동 슬라이딩
),
items: dummyItems.map((url) {
return Builder(
builder: (BuildContext context) { // context를 사용하고자 할 때
return Container(
width: MediaQuery.of(context).size.width, // 기기의 가로 길이
margin: EdgeInsets.symmetric(
horizontal: 5.0 // 좌우 여백 5
),
decoration: BoxDecoration(
color: Colors.amber // 배경색
),
child: ClipRRect( // 둥근 사각형
borderRadius: BorderRadius.circular(8.0), // 모서리 둥글게 표시
child: Image.network( // 인터넷 이미지 표시
url,
fit: BoxFit.cover, //여백이 남지 않도록 함
),
),
);
},
);
}).toList(),
);
}
Widget _buildBottom() {
final items = List.generate(10, (i){
return ListTile(
leading: Icon(
Icons.notifications_none,
),
title: Text(
"[이벤트] 이것은 공지사항입니다.",
),
);
});
return ListView(
// 스크롤 안에 스크롤을 넣은 경우이기 때문에 안쪽 스크롤을 막아야 정상 동작이 된다.
physics: NeverScrollableScrollPhysics(), // 이 리스트의 스크롤 동작 금지
shrinkWrap: true, // 이 리스트가 다른 스크롤 객체 안에 있다며 true로 설정
children: items,
);
}
class Page2 extends StatelessWidget {
const Page2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"이용서비스",
style: TextStyle(
fontSize: 40,
),
),
);
}
}
class Page3 extends StatelessWidget {
const Page3({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"내 정보",
style: TextStyle(
fontSize: 40,
),
),
);
}
}
|