How can I customize each interface of a list view in Flutter?

Question

I'm developing a catalog of products, with a List of Cards, each Card has a button, but when I press it, all the Cards, direct me to the same activity, how could I make each card I went to a different activity and modified it my way.

I've tried the Hero widget, but it's the same thing it repeats the same screen, just with different image and text.

Interface of Aplication

PAGE OF LIST CARDS

import 'package:flutter/material.dart';
class SlidingCard extends StatelessWidget {
  final String name; //<-- title of the event
  final String date; //<-- date of the event
  final String assetName; //<-- name of the image to be displayed

  const SlidingCard({
    Key key,
    @required this.name,
    @required this.date,
    @required this.assetName,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.only(left: 8, right: 8, bottom: 24),
      elevation: 8,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)), //<--custom shape
      child: Column(
        children: [
          ClipRRect(  //<--clipping image
            borderRadius: BorderRadius.vertical(top: Radius.circular(32)),
            child: Image.asset( //<-- main image
              'lib/assets/$assetName',
              height: MediaQuery.of(context).size.height * 0.35,
              width: 500,
              fit: BoxFit.cover,
            ),
          ),
          SizedBox(height: 8),
          Expanded(
            child: CardContent(
              name: name,
              date :date,
            ), //<-- will be replaced soon :)
          ),
        ],
      ),
    );
  }
}

class CardContent extends StatelessWidget {
  final String name;
  final String date;

  const CardContent({Key key, @required this.name, @required this.date})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(name, style: TextStyle(fontSize: 20)),
          SizedBox(height: 8),
          Text(date, style: TextStyle(color: Colors.grey)),
          Spacer(),
          //SizedBox(width: 30),
          Row(
            children: [
              RaisedButton(
                color: Color(0xFF162A49),
                child: Text('VER PRODUCTOS'),
                textColor: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(32),
                ),
                onPressed: () {print("Hello");}, //<-- I want this button to allow each card to navigate to a different activity
              ),
              SizedBox(width: 4),
              Icon( Icons.visibility),
              SizedBox(width: 16),
            ],
          )
        ],
      ),
    );
  }
}

PAGE CARDS

import 'package:flutter/material.dart';
import 'package:pt_nisira_app/controller/cards_ex.dart';

class pagePay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      body: Center(
          child : Padding(
            padding: const EdgeInsets.only(top:15.0),
            child: SlidingCardsView(),
          ),
      ),
    );
  }
}
class SlidingCardsView extends StatefulWidget {
  @override
  _SlidingCardsViewState createState() => _SlidingCardsViewState();
}

class _SlidingCardsViewState extends State {

  PageController pageController;

  @override
  void initState() {
    super.initState();
    pageController = PageController(viewportFraction: 0.8);
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 350,
      height: MediaQuery.of(context).size.height * 0.65,  //<-- set height of the card
      child: PageView(
        controller: pageController,
        children: [
          SlidingCard(
            name: 'CATALAGO DE GASEOSAS',
            date: '4.20-30',
            assetName: 'bebidas_gaseosas.jpg',
          ),
          SlidingCard(
            name: 'CATALAGO DE GOLOSINAS',
            date: '4.28-31',
            assetName: 'golosinas_productos.jpg',
          ),
          SlidingCard(
            name: 'CATALAGO DE LACTEOS',
            date: '4.28-31',
            assetName: 'lacteos_productos.jpg',
          ),
          SlidingCard(
            name: 'CATALAGO DE PRODUCTOS DE COCINA',
            date: '4.28-31',
            assetName: 'cocina_productos.jpg',
          ),
        ],
      ),
    );
  }
}

I would like each page to be customized

user_11679516 · Answer

First, you should create a list of routes as : final routes = ['/FirstPage', '/SecondPage']; Then, on onTap() of the list item : Navigator.pushNamed(context, routes[index]);

user_5860363 · Answer

you can pass activity prop to your SlidingCard.

 SlidingCard(
    name: 'CATALAGO DE GOLOSINAS',
    date: '4.28-31',
    assetName: 'golosinas_productos.jpg',
    activity: () {
        print('do some acitivity');
    }
),
 SlidingCard(
    name: 'CATALAGO DE GOLOSINAS',
    date: '4.28-31',
    assetName: 'golosinas_productos.jpg',
    activity: () {
        print('do some another acitivity');
    }
),

and in your CardContent widget :

RaisedButton(
      color: Color(0xFF162A49),
      child: Text('VER PRODUCTOS'),
      textColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(32),
      ),
     onPressed: () {
        activity(); // pass your acitivity prop from top level widget to CardContent widget and call it on the RaisedButton;
      },
),

How can I customize each interface of a list view in Flutter?

2 Answers