image_card_list 1.0.1

Make a scrollable list of image cards with less boilerplate code. Quick, dynamic and reusable. Use images from assets and network simultaneously to form the widget.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:image_card_list/image_card_list.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ImageCardList(
        // The map allows both assets and http paths.
        map: {
          "Tiger": "assets/tiger.jpg",
          "Wolf": "https://i.ibb.co/Gp8xvsx/images-15.jpg",
          "Leopard": "assets/leopard.jpeg",
          "Zebra": "assets/zebra.jpg",
          "Giraffe": "assets/giraffe.jpeg",
          "Bear": "assets/bear.jpeg",
          "Monkey": "assets/monkey.jpeg"
        },
        // Display/hide name tags.
        displayNameTag: true,
        // Build your onTap execution here...
        onTap: (name, image) {
          xyzCode(name, image, context);
        },
      ),
    );
  }

  xyzCode(String name, ImageProvider<dynamic> image, BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return Scaffold(
        body: Center(
          child: Hero(
            tag: "my-hero-animation",
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  height: MediaQuery.of(context).size.height / 3,
                  width: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      // Using image
                      image: image,
                      fit: BoxFit.fill,
                      alignment: Alignment.topCenter,
                    ),
                  ),
                ),
                SizedBox(height: 10.0),
                // Using image name
                Text(name, style: TextStyle(fontSize: 40.0)),
                SizedBox(height: 8.0),
                Expanded(
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: Text(
                      someText * 15,
                      textAlign: TextAlign.justify,
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }));
  }

  final String someText =
      "Animals are important for our ecosystem and environment." +
          "We humans depend on animals for certain things, for example, milk from cow.";
}