How to make cards swipeable like tabs in flutter?

Question

I have been trying to make cards swipeable like tabs as shown in my mocks. I have added my code and mock for reference.

Code:

Container(
              margin: EdgeInsets.only(top: 35),
              child: Center(
                child: Card(
                  child: InkWell(
                    // splashColor: Colors.blue.withAlpha(30),
                    onTap: () {
                      print('Card tapped.');
                    },
                    child: Container(
                      width: 300,
                      height: 450,
                      padding: EdgeInsets.all(30),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            '3 month Test Pass',
                            style: TextStyle(
                                fontSize: 23, fontWeight: FontWeight.bold),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10),
                            child: Text(
                              '50% off for early Birds',
                              style: TextStyle(
                                  color: Colors.black54, fontSize: 16),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 40),
                            child: Text(
                              'INR 49/month',
                              style: TextStyle(
                                  fontSize: 21, fontWeight: FontWeight.bold),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 7),
                            child: Text(
                              'INR 147 for 90 days',
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 30),
                            child: Text(
                              'New live exam every Monday',
                              style: TextStyle(
                                color: Colors.black87,
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Text(
                              'Unlimited practise tests series',
                              style: TextStyle(
                                color: Colors.black87,
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Text(
                              'Paper tailored by AI for you',
                              style: TextStyle(
                                color: Colors.black87,
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Text(
                              'Solved previous year questions',
                              style: TextStyle(
                                color: Colors.black87,
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 35),
                            child: RaisedButton(
                              padding: const EdgeInsets.only(top:10,bottom:10,left:40,right: 40),
                              textColor: Colors.black,
                              color: Colors.green,
                              child: Text('Buy Now',style: TextStyle(fontSize: 20),),
                              onPressed: null,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            )

This is a container showing only one card, which is added in an array of Column in the body of Scaffold.

The idea is to have horizontally swipeable cards to make the user see the plans.

I am a beginner in Flutter.

score 2 · Answer 1 · answered Nov 08 '19 at 11:35

You can use a ListView then set the scroll direction to horizontal

Just put all your containers / cards in the list view

Example:

ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 160.0,
                color: Colors.red,
              ),
              Container(
                width: 160.0,
                color: Colors.blue,
              ),
              Container(
                width: 160.0,
                color: Colors.green,
              ),
              Container(
                width: 160.0,
                color: Colors.yellow,
              ),
              Container(
                width: 160.0,
                color: Colors.orange,
              ),
            ],
          ),

References

ListView - horizontal

How to make cards swipeable like tabs in flutter?

1 Answers1