Блог

У меня есть прямоугольник с некоторым текстом внутри списка, и я хочу расширить этот прямоугольник, когда пользователь нажимает на in, в больший прямоугольник с большим содержанием в нем

Например, это мой первоначальный виджет:

И когда пользователь нажимает на «Rect 1», я хочу, чтобы он расширился до:

Вы можете использовать новый пакет анимации от flutter. Это позволяет добавлять анимации для расширения контейнера в контейнер большего размера, что позволит отображать больший контент.

Здесь вы можете найти ссылку на пакет: https://pub.dev/packages/animations

Здесь вы можете найти, как это реализовать, если хотите: https://www.youtube.com/watch?v=HHzAJdlEj1c

Надеюсь, это ответит на ваш вопрос и поможет вам. Это не очень сложно реализовать, например, установить детектор жестов и т. Д.

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

Вот один из примеров :

 class Test extends StatefulWidget {

  @override
  TestState createState() => TestState() ;

}

class TestState extends State<Test> {

bool showPlus = false ; 

  Widget build (BuildContext context) {
    return Scaffold (
     body : GestureDetector(
        onTap: () {
        setState (() {
          (showPlus) ? showPlus = false :showPlus = true ;
        });
  }, 
  child: Column(
   children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20 , vertical: 20),
              child: Text(
                  'Rect 1',
              ),
            ),
            (showPlus) ? Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(width: 100 , height: 100, color: Colors.white,),
                Container(width: 100 , height: 100, color: Colors.white,),
                Container(width: 100 , height: 100, color: Colors.white,),
              ],
            ) : SizedBox.shrink()
          ],
       )
      )
    );
   }
 }