如何在ListView ontap中展开小部件？

问题描述

我创建了一个以容器框作为小部件的ListView。我希望特定的容器将onTap扩展到特定的屏幕高度和宽度。我需要帮助来实现这一目标。我已经在AdobeXD上制作了原型。

AdobeXD Prototype GIF

我是新手，很高兴能得到任何帮助。

解决方法

一个名为flutter swiper的flutter插件可能会帮助您实现想要的目标。 访问此发布商开发人员，您可以阅读文档。

,

你在这里走，兄弟，虽然它不会模糊背景，但我认为它将带你前进。

它正在像这样工作：

下面的代码可以复制粘贴。我在代码中添加了注释，以更好地理解它。干杯：）

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeApp(),);
  }
}

class HomeApp extends StatefulWidget {
  @override
  _HomeAppState createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  // Items in the list --> Custom Widgets
  List<Widget> arr = [
    ListContainerHere(),ListContainerHere(),];

  Widget getListWidget(List<Widget> items) {
    List<Widget> list = new List<Widget>();

    for (var i = 0; i <= items.length; i++) {
      list.add(new ListContainerHere(
        index: i,));
    }
    return Row(children: list);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App :)"),),body: Center(
        // Using a 'Row' as Horizontal ListView
        child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,child: getListWidget(arr)),);
  }
}

// Widgets that will be rendered in the Horizontal Row
class ListContainerHere extends StatefulWidget {
  final int index;
  ListContainerHere({this.index});

  @override
  _ListContainerHereState createState() => _ListContainerHereState();
}

class _ListContainerHereState extends State<ListContainerHere> {
  // Varibale to change the height and width accordingly
  // Initally no item will be expanded
  bool isExpanded = false;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),child: GestureDetector(
        onTap: () {
          // Changing the value of 'isExpanded' when an item is tapped in the List
          setState(() {
            isExpanded = !isExpanded;
          });
        },// AnimatedContainer for slowing down the changing
        child: AnimatedContainer(
          duration: Duration(milliseconds: 150),// Changing the width and height
          height: isExpanded ? 250 : 150,width: isExpanded ? 250 : 150,// Decoration Portion of the Container
          decoration: BoxDecoration(
              color: Colors.blue,borderRadius: BorderRadius.circular(15.0)),);
  }
}