Building a Tinder-like Dating App with Flutter

Our Flutter Dating App

The app is simple: users swipe right to like and left to dislike. The app features a red arc background with a title and a stack of cards for different profiles above it. Under the cards are like and dislike buttons that users can use instead of swiping.

Starting with a Basic Card Stack

To create the UI, we’ll split it into two widgets:

• BackgroundCurveWidget: This widget will contain the red arc gradient background.
• CardsStackWidget: This widget will contain the stack of cards along with like and dislike buttons.

Creating Profile Cards

We’ll create a model class to hold the information required by the profile card. The profile card will include a vertical image, person’s name, and distance.

class Profile {
  final String imageUrl;
  final String name;
  final double distance;

  Profile({required this.imageUrl, required this.name, required this.distance});
}

Making ProfileCard Draggable

We’ll use the Draggable widget to make the profile card draggable. We’ll also use ValueNotifier and ValueListenableBuilder to rebuild the widget when the user drags the card.

class ProfileCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Draggable(
      child: Card(
        child: Column(
          children: [
            Image.network(profile.imageUrl),
            Text(profile.name),
            Text('${profile.distance} miles away'),
          ],
        ),
      ),
      feedback: Card(
        child: Column(
          children: [
            Image.network(profile.imageUrl),
            Text(profile.name),
            Text('${profile.distance} miles away'),
          ],
        ),
      ),
    );
  }
}

Building a Stack of Draggable Cards with DragTarget

We’ll create a stack of draggable cards with a DragTarget widget. The DragTarget widget will accept a draggable card when it’s dropped inside it.

class CardsStackWidget extends StatefulWidget {
  @override
  _CardsStackWidgetState createState() => _CardsStackWidgetState();
}

class _CardsStackWidgetState extends State {
  final List _profiles = [
    Profile(imageUrl: 'https://example.com/image1', name: 'John Doe', distance: 5),
    Profile(imageUrl: 'https://example.com/image2', name: 'Jane Doe', distance: 10),
    //...
  ];

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        BackgroundCurveWidget(),
        DragTarget(
          builder: (context, candidateData, rejectedData) {
            return CardsStack(_profiles);
          },
        ),
      ],
    );
  }
}

Making Like and Dislike Action Buttons

We’ll create two action buttons at the bottom of the screen. These buttons will allow users to like or dislike a profile without swiping the card.

class LikeDislikeButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        ElevatedButton(
          child: Text('Dislike'),
          onPressed: () {
            // Dislike action
          },
        ),
        ElevatedButton(
          child: Text('Like'),
          onPressed: () {
            // Like action
          },
        ),
      ],
    );
  }
}

Putting it all Together

After making all the necessary changes, our CardsStackWidget code will look like this:

class CardsStackWidget extends StatefulWidget {
  @override
  _CardsStackWidgetState createState() => _CardsStackWidgetState();
}

class _CardsStackWidgetState extends State {
  //...
}

Tips and Variations

You can customize the app by changing the background color, font style, and card design.

• You can add more features like user profiles, chat functionality, and matchmaking algorithms.
• Get creative and make the app your own!

Learn more about building Flutter apps.