How can I add multiple cards in ListView?

84 Views Asked by At

I am trying to make a bookmark app and would like to show 3 bookmarks(ex: Google, Apple, Facebook) as default. So I want to add 3 more cards inside the ListView, but it results in error if I try to add other cards. How can I solve this problem? Please help me. Here is the code down below.

class _BookmarkListPageState extends State<BookmarkListPage> {

  List<String> bookmarkList = [];
  List<String> bookmarkUrl = [];

  _launchUrl(int index) async {
    var url = Uri.parse(bookmarkUrl[index]);
    if (await canLaunchUrl(url)) {
      await launchUrl(url);
    } else {
      throw "Could not open $url";
    }
  }

  @override
  Widget build(BuildContext context) {

    var box = Hive.box(bookmarkBox);

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.white,
        title: Text(
          widget.title,
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
        ),
        bottom: PreferredSize(
          child: Container(
            height: 1,
            color: Colors.black,
          ),
          preferredSize: Size.fromHeight(1),
        ),
      ),
      body: ListView.builder(
        itemCount: bookmarkList.length,
        itemBuilder: (context, index) {
          // delete card if you swipe
          return Dismissible(
            background: Container(
              color: Colors.red,
              child: Icon(
                Icons.delete,
                color: Colors.white,
              ),
            ),
            onDismissed: (direction) {
              setState(() {
                bookmarkList.removeAt(index);
              });
            },
            key: UniqueKey(),
            child: Card(
              child: ListTile(
                title: Text(
                  bookmarkList[index],
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
                subtitle: Text(bookmarkUrl[index]),
                onTap:() => _launchUrl(index),
              ),
            ),
          );
        },
      ),
1

There are 1 best solutions below

0
On BEST ANSWER

you can do it like this example

class _BookmarkListPageState extends State<BookmarkListPage> {
  List<String> bookmarkList = ['Google', 'Apple', 'Facebook'];
  List<String> bookmarkUrl = [
    'https://www.google.com',
    'https://www.apple.com',
    'https://www.facebook.com',
  ];

  // your code...
}