Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to trigger swipe with buttons? #10

Open
jhswedeveloper opened this issue Jan 29, 2020 · 8 comments
Open

How to trigger swipe with buttons? #10

jhswedeveloper opened this issue Jan 29, 2020 · 8 comments

Comments

@jhswedeveloper
Copy link

Newbie question how do one trigger the swipe and the animation when like button pressed?

@PierreG49
Copy link

Hej dude !

If you have found the solution i'll be glad to be aware because i'm a bit lost right now !

@EthicalCha0s
Copy link

You can trigger a swipe animation from a button by manually moving the front card's alignment past it's treshold and then triggering the animateCards method.

example:

 onPressed: () {
     setState(() {
          // Manually move the card past it's treshold
          frontCardAlign = Alignment(
              frontCardAlign.x + 3, frontCardAlign.y);
              frontCardRot = frontCardAlign.x;
             });
          // trigger the animation
         animateCards();
},

@PierreG49
Copy link

hi men ! thanks for the answer, but where is the animateCards method ?

@EthicalCha0s
Copy link

you should be able to find the animateCards(); method in lib/cards_section_alignment.dart. I posted the comment assuming that you're using the alignment technique, for the draggable technique I have no idea 😅

@b02505048
Copy link

You can trigger a swipe animation from a button by manually moving the front card's alignment past it's treshold and then triggering the animateCards method.

example:

 onPressed: () {
     setState(() {
          // Manually move the card past it's treshold
          frontCardAlign = Alignment(
              frontCardAlign.x + 3, frontCardAlign.y);
              frontCardRot = frontCardAlign.x;
             });
          // trigger the animation
         animateCards();
},

I curious about how could we call the method animateCards() which in lib/cards_section_alignment.dart from the onPress() event of the buttonsRow which in lib/swipe_feed_page.dart?

I'm a Flutter beginner, sorry for that if I asked a silly question.

@ghost
Copy link

ghost commented Sep 4, 2020

You can trigger a swipe animation from a button by manually moving the front card's alignment past it's treshold and then triggering the animateCards method.
example:

 onPressed: () {
     setState(() {
          // Manually move the card past it's treshold
          frontCardAlign = Alignment(
              frontCardAlign.x + 3, frontCardAlign.y);
              frontCardRot = frontCardAlign.x;
             });
          // trigger the animation
         animateCards();
},

I curious about how could we call the method animateCards() which in lib/cards_section_alignment.dart from the onPress() event of the buttonsRow which in lib/swipe_feed_page.dart?

I'm a Flutter beginner, sorry for that if I asked a silly question.

Take no notice, he is having you on and causing you more headache with that answer. User streams is the correct way. Will post you a solution in a moment. really annoys me when people make off cuff replies which confuse people even more.

@ghost
Copy link

ghost commented Sep 4, 2020

In your main set a stream

StreamController<String> controller = StreamController<String>();

Now in your swipe_feed_page.dart call the stream

Stream stream = controller.stream;

You will also have to import your main.dart

Now change the buttons to this

FloatingActionButton(
            onPressed: () {
              controller.add("hate");
            },
            backgroundColor: Colors.white,
            child: Icon(Icons.close, color: Colors.red),
          ),
          Padding(padding: EdgeInsets.only(right: 8.0)),
          FloatingActionButton(
            onPressed: () {
              controller.add("like");
            },
            backgroundColor: Colors.white,
            child: Icon(Icons.favorite, color: Colors.green),
          ),
          Padding(padding: EdgeInsets.only(right: 8.0)),

In code_section_alignment.dart reference the stream

Stream stream = controller.stream;

Now in the init state of the same file add this

stream.listen((value) {
      if (value == "like") {
        automoveright();
      } else {
        automoveleft();
      }
    });

Now also in the same file add these functions

void automoveright() {
    setState(() {
      // Manually move the card past it's treshold
      frontCardAlign = Alignment(frontCardAlign.x + 3, frontCardAlign.y);
      frontCardRot = frontCardAlign.x;
    });
    // trigger the animation
    animateCards();
  }
  void automoveleft() {
    setState(() {
      // Manually move the card past it's treshold
      frontCardAlign = Alignment(frontCardAlign.x, frontCardAlign.y + 3);
      frontCardRot = frontCardAlign.y;
    });
    // trigger the animation
    animateCards();
  }

Build and press like or "hate"

@ghost
Copy link

ghost commented Sep 4, 2020

May want to also put a delay for those with frisky thumbs also

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants