0

Good afternoon! I am new to Flutter. Faced such a problem There is a scooter card. I need it to be able to move vertically across the screen between three positions - initial, top and bottom (as planned, in the bottom position, part of the card goes off the screen). I tried to solve it through AnimatedPositioned and child GestureDetector. But I managed to do it well for only two positions. When I tried to do this for three positions, the movements did not work out quite correctly. Because of what it is difficult to install the card in its original position. How can this be done for three positions? Maybe not through AnimatedPositioned? Thanks a lot!

starting positionbottom positiontop position

this is how i did for 2 positions

class CardBeforeRent extends StatefulWidget {
  const CardBeforeRent({super.key});

  @override
  State<CardBeforeRent> createState() => _CardBeforeRentState();
}

class _CardBeforeRentState extends State<CardBeforeRent> {
  bool isHiden = false;

  num hidenV = 0;
  hide(details) {
    if (details.delta.dy < 0) {
      setState(() {
        hidenV = 0;
        isHiden = false;
      });
    } else if (details.delta.dy > 0) {
      setState(() {
        hidenV = -265;
        isHiden = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
      width: MediaQuery.of(context).size.width,
      duration: const Duration(milliseconds: 600),
      bottom: isHiden ? hidenV.toDouble() : 0,
      child: GestureDetector(
        onVerticalDragUpdate: (details) => hide(details),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            SizedBox(
              height: 360,
              child: StatefulBuilder(
                builder: (context, setState) => FractionallySizedBox(
                  heightFactor: 1.1,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    decoration: BoxDecoration(
                      color: Theme.of(context).dialogBackgroundColor,
                      borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(15),
                        topRight: Radius.circular(15),
                      ),
                    ),
                    child: Column(
                      children[...],
                    ),
                  ),
                ),
              ),
            ),        
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  decoration:
                      BoxDecoration(color: Theme.of(context).bottomAppBarColor),
                  height: 100,
                  child: BookButton(...),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

this is what i tried to do for 3 positions

class _CardBeforeRentState extends State<CardBeforeRent> {
  double cardPadding = 0;


  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
      width: MediaQuery.of(context).size.width,
      duration: const Duration(milliseconds: 600),
      bottom: cardPadding,
      child: GestureDetector(
               onVerticalDragUpdate: (details) {
          if (details.delta.dy == 0) {
            setState(() {
              cardPadding = 0;
            });
          } else if (details.delta.dy < 0) {
            setState(() {
              cardPadding = -265;
            });
          } else if (details.delta.dy > 0) {
            setState(() {
              cardPadding = 140;
            });
          }
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            SizedBox(
              height: 360,
              child: StatefulBuilder(
                builder: (context, setState) => FractionallySizedBox(
                  heightFactor: 1.1,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    decoration: BoxDecoration(
                      color: Theme.of(context).dialogBackgroundColor,
                      borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(15),
                        topRight: Radius.circular(15),
                      ),
                    ),
                    child: Column(
                      children[...],
                    ),
                  ),
                ),
              ),
            ),        
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  decoration:
                      BoxDecoration(color: Theme.of(context).bottomAppBarColor),
                  height: 100,
                  child: BookButton(...),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

0 Answers0