How to expand a widget in ListView ontap?

Question

I have created a ListView with container boxes as widgets. I want a specific container to expand onTap upto a specific screen height and width. I need help in implementing this in flutter. I have made a prototype on AdobeXD.

AdobeXD Prototype GIF

I am new to flutter, any kind of help is appreciated.

Try yourselves, and ask here when stuck with code. – Subair K Oct 21 '20 at 12:21 — Subair K, Oct 21 '20 at 12:21

score 1 · Answer 1 · answered Oct 21 '20 at 11:18

1

A flutter plugin called flutter swiper might help you achieve what you want to achieve. Visit this pub dev and you can read documentation.

answered Oct 21 '20 at 11:18

Abhishek singh

92
5

Thanks, I am able to create a ListView. But I want that box to expand on tap. – RohitGanji Oct 21 '20 at 11:45
Wrap the list item in InkWell Widget it has onTap property in which you can expand the size of the tapped widget – Abhishek singh Oct 21 '20 at 15:44

score 0 · Answer 2 · answered Oct 21 '20 at 12:14

Here you go brother, Although its not blurring the background but I think it will get you going.

It's working something like this:

Below the code which you can copy paste. I have added comments in the code for understanding it in better way. Cheers :)

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

That's nice. Is there a way to add a snap effect and enlarge the center page to this? — RohitGanji, Oct 21 '20 at 14:34
I'm sorry what to you mean by snap effect? Considering the enlargement you can simple increase the `height` and `width` it will work :) — Hamza, Oct 21 '20 at 14:48
Take a look at this gif. https://ibb.co/FJc2gkq I want the center widget to be a little bigger than the other widgets. A widget must always be at the center. So when I tap on it, it expands to a bigger widget. (you can see that gif in the main question) — RohitGanji, Oct 21 '20 at 14:58
@RohitGanji sorry brother, I'm trying the solution but reaching no where. I will update the answer ASAP i get the working done. Meanwhile if it helped do mark a vote :) Cheers! — Hamza, Oct 21 '20 at 15:25

How to expand a widget in ListView ontap?

2 Answers2