如何实现搜索功能来搜索这个转盘?

时间:2019-07-05 20:26:07

标签: flutter flutter-layout

我制作了一个图像旋转抖动应用程序,该应用程序在顶部显示图像,在底部显示相应的细节。详细信息以列表的形式给出。我想为该应用实现搜索功能,以便在添加更多图片时,可以轻松导航至所需的图片。

由于此应用程序没有应用程序栏,所以我不知道如何实现搜索栏和添加功能

这是图像轮播的代码。


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",]

我要在搜索城市时实现搜索功能,应更改相应的图像及其详细信息。

0 个答案:

没有答案