我制作了一个图像旋转抖动应用程序,该应用程序在顶部显示图像,在底部显示相应的细节。详细信息以列表的形式给出。我想为该应用实现搜索功能,以便在添加更多图片时,可以轻松导航至所需的图片。
由于此应用程序没有应用程序栏,所以我不知道如何实现搜索栏和添加功能
这是图像轮播的代码。
Widget dashboard(context) {
return AnimatedPositioned(
duration: duration,
top: 0,
bottom: 0,
left: isCollapsed ? 0 : 0.85 * screenWidth,
right: isCollapsed ? 0 : -0.85 * screenWidth,
child: Material(
elevation: 2,
child: Container(
child: Stack(
children: <Widget>[
Opacity(
opacity: 0.25,
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
child: Image.asset(
imageList[currentPage],
fit: BoxFit.fitHeight,
height: double.infinity,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: screenHeight - 385,
child: PageView.builder(
itemBuilder: (context, index) {
return itemBuilder(index);
},
controller: _pageController,
pageSnapping: true,
physics: BouncingScrollPhysics(),
onPageChanged: _onPageChanged,
// TODO Here is where the itemcount is increased.
itemCount: 60,
),
),
_detailsBuilder(currentPage),
],
),
Positioned(
top: 48,
left: 15,
child: InkWell(
enableFeedback: true,
child: Icon(
Icons.menu,
size: 40,
),
onTap: () {
setState(() {
if (isCollapsed) {
_controller.forward();
} else {
_controller.reverse();
}
isCollapsed = !isCollapsed;
});
},
),
),
Positioned(
top: 48,
right: 15,
child: InkWell(
enableFeedback: true,
child: Icon(
Icons.search,
size: 40,
),
onTap: () {
setState(() {
if (isCollapsed) {
_controller.forward();
} else {
_controller.reverse();
}
isCollapsed = !isCollapsed;
});
},
),
),
],
),
),
),
);
}
详细信息生成器
Widget itemBuilder(index) {
return AnimatedBuilder(
animation: _pageController,
builder: (context, child) {
double value = 1;
if (_pageController.position.haveDimensions) {
value = _pageController.page - index;
value = (1 - (value.abs() * 0.5)).clamp(0.0, 1.0);
return Align(
alignment: Alignment.topCenter,
child: Container(
child: child,
height: Curves.easeIn.transform(value) * 600,
margin: const EdgeInsets.only(left: 20, right: 20, bottom: 10),
),
);
} else {
return Align(
alignment: Alignment.topCenter,
child: Container(
child: child,
height:
Curves.easeIn.transform(index == 0 ? value : value * 0.5) *
screenHeight -
385,
margin: const EdgeInsets.only(left: 20, right: 20, bottom: 10),
),
);
}
},
child: Material(
color: Colors.white,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.circular(30.0),
),
),
child: Padding(
padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
child: ClipRRect(
child: Image.asset(
imageList[index],
fit: BoxFit.fitHeight,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.circular(30.0),
),
),
)),
);
}
详细信息列表
final detailsList = [
Detail(
title: "Chennai",
description:
"Chennai's description"),
Detail(
title: "Coimbatore",
description:
"Coimbatore's description"),
图片列表
final imageList = [
"images/1.jpg",
"images/2.jpg",]
我要在搜索城市时实现搜索功能,应更改相应的图像及其详细信息。