我已经创建了一个三个图像滑块,但我不知道如何使该滑块的页面指示器。我想根据第二个图像滑块。我附上正常的页面滑块所在的地方。我需要滑块下方的指示器作为中心。
我需要使滑块指示器下面这个滑块。我附加的滑块图像,我需要我搜索堆栈,但我找不到相同的喜欢,所以我需要帮助。
完整代码:
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main(){
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
debugShowCheckedModeBanner: false,
);
}
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
final scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
elevation: 0,
toolbarHeight: 100,
backgroundColor: Colors.white38,
centerTitle: true,
title: const Text("Treva Shopping",
style: TextStyle(
color: Colors.black45
),),
leading: IconButton(
icon: const Icon(Icons.menu,
color: Colors.black45,
size: 32),
onPressed: (){
if(scaffoldKey.currentState!.isDrawerOpen){
scaffoldKey.currentState!.closeDrawer();
//close drawer, if drawer is open
}else{
scaffoldKey.currentState!.openDrawer();
//open drawer, if drawer is closed
}
},
),
),
drawer:buildDrawer(),
body: CarouselSlider(
items: [Image.asset("assets/AC Banner.png",
height: 600,
width: 380),
Image.asset("assets/Kitchen Banner.png",
height: 600,
width: 380),
Image.asset("assets/samsung banner.png",
height: 600,
width: 380)],
options: CarouselOptions(
autoPlay: true,
enableInfiniteScroll: false,
),)
);
}
Drawer buildDrawer() {
return Drawer(
child: ListView(
children: <Widget>[
const SizedBox(height: 20),
ListTile(
title: const Text("Treva",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black45,
fontSize: 25),
),
trailing: IconButton(
onPressed: (){
Navigator.pop(context);
},
icon: const Icon(Icons.close)),
),
const SizedBox(height: 10),
const ExpansionTile(
leading: Icon(Icons.category_outlined),
title: Text("All Category"),
children:[SizedBox(height: 05,),
Text("Sample 1")],
),
const ExpansionTile(
leading: Icon(Icons.microwave_outlined),
title: Text("Kitchen Appliances"),
children:[SizedBox(height: 05,),
Text("Sample 1")],
),
const ExpansionTile(
leading: Icon(Icons.tv_rounded),
title: Text("Television"),
children:[SizedBox(height: 05,),
Text("Sample 1")],
),
const ExpansionTile(
leading: Icon(Icons.air_outlined),
title: Text("Air Conditioners"),
children:[SizedBox(height: 05,),
Text("Sample 1")],
),
const ExpansionTile(
leading: Icon(Icons.kitchen_outlined),
title: Text("Refrigerators"),
children:[SizedBox(height: 05,),
Text("Sample 1")],
),const ExpansionTile(
leading: Icon(Icons.local_laundry_service_outlined),
title: Text("Washing Machines"),
children:[SizedBox(height: 05,),
Text("Sample 1")],
),
],
),
);
}
}
1条答案
按热度按时间oalqel3c1#
你可以这样做
点击此处查看演示
像这样对代码做了一些小小的改动
您可以实现这种类型的设计。