Как развернуть виджет в ListView по тапу?

Я создал ListView с контейнерами в качестве виджетов. Я хочу, чтобы конкретный контейнер расширялся onTap до определенной высоты и ширины экрана. Мне нужна помощь в реализации этого в флаттер. Я сделал прототип на AdobeXD.

Прототип AdobeXD GIF

Я новичок в флаттере, любая помощь приветствуется.


person RohitGanji    schedule 21.10.2020    source источник
comment
Попробуйте сами и спросите здесь, если застряли с кодом.   -  person Subair K    schedule 21.10.2020


Ответы (2)


Плагин флаттера под названием flutter swiper может помочь вам достичь того, чего вы хотите. Посетите этот паб-разработчик, и вы сможете прочитать документацию.output

person Abhishek singh    schedule 21.10.2020
comment
Спасибо, я могу создать ListView. Но я хочу, чтобы эта коробка расширялась при нажатии. - person RohitGanji; 21.10.2020
comment
Оберните элемент списка в InkWell Widget, у него есть свойство onTap, в котором вы можете увеличить размер нажатого виджета. - person Abhishek singh; 21.10.2020

Держи, брат. Хотя это не размывает фон, но я думаю, что это заставит тебя двигаться.

Это работает примерно так:

введите здесь описание изображения

Ниже код, который вы можете скопировать и вставить. Я добавил комментарии в код для лучшего понимания. Ваше здоровье :)

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(),
    ListContainerHere(),
    ListContainerHere(),
    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)),
        ),
      ),
    );
  }
}

person Hamza    schedule 21.10.2020
comment
Это мило. Есть ли способ добавить эффект привязки и увеличить центральную страницу? - person RohitGanji; 21.10.2020
comment
Извините, что вы имеете в виду под моментальным эффектом? Учитывая увеличение, вы можете просто увеличить height и width, и это сработает :) - person Hamza; 21.10.2020
comment
Взгляните на эту гифку. ibb.co/FJc2gkq Я хочу, чтобы центральный виджет был немного больше других виджетов. Виджет всегда должен быть в центре. Поэтому, когда я нажимаю на него, он расширяется до большего виджета. (вы можете увидеть эту гифку в основном вопросе) - person RohitGanji; 21.10.2020
comment
@RohitGanji, извини, брат, я пытаюсь найти решение, но ничего не получается. Я обновлю ответ как можно скорее, я закончу работу. Между тем, если это помогло, отметьте голосование :) Ура! - person Hamza; 21.10.2020