如何在卡 flutter 中制作列表视图

Question

I am a new flutter developer.I try to make listview to view a set of data that comes from the database.The list now works, but as follows:

Now it is not presented separately.I need to display every element in the card.An example of what I'm trying to do:

In this picture, each item on the card is separate and separated from the second.How I can do it?If anyone knows the solution please help me.

my code now like that:

@override
    Widget build(BuildContext context) {

    return Scaffold(
        body: Column(
            children: <Widget>[
              Expanded(
                   child: Card(
                       child :FutureBuilder<List<Flowerdata>>(
                          future: fetchFlowers(),
                        builder: (context, snapshot) {
                          if (!snapshot.hasData) return Center(
                          child: CircularProgressIndicator()
                          );

                      return ListView(

                        children: snapshot.data
                            .map((data) => Column(children: <Widget>[

                          GestureDetector(
                            onTap: ()=>{
                              getItemAndNavigate(data.id, context)
                            },
                            child: Row(
                                children: [
                                  Container(
                                      width: 100,
                                      height: 100,
                                      margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                      child: ClipRRect(
                                          borderRadius: BorderRadius.circular(8.0),
                                          child:
                                          Image.network(data.flowerImageURL,
                                            width: 200, height: 100, fit: BoxFit.cover,))),

                                  Flexible(child:
                                  Text(data.flowerName,
                                      style: TextStyle(fontSize: 18))
                                  ),

                                ]),),

                          Divider(color: Colors.black),

                        ],
                        ))
                            .toList(),

                      );

                    },

                  )
              ),

              ),
          ]
      )
    );
  }

Answer 1

You need to wrap your item's Column (not the FutureBuilder ) in with Card

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(children: <Widget>[
      Expanded(
        child: FutureBuilder<List<Flowerdata>>(
          future: fetchFlowers(),
          builder: (context, snapshot) {
        if (!snapshot.hasData)
          return Center(child: CircularProgressIndicator());

        return ListView(
          children: snapshot.data
              .map((data) => Card(
                child: Column(
                      children: <Widget>[
                        GestureDetector(
                          onTap: () => {getItemAndNavigate(data.id, context)},
                          child: Row(children: [
                            Container(
                                width: 100,
                                height: 100,
                                margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                child: ClipRRect(
                                    borderRadius: BorderRadius.circular(8.0),
                                    child: Image.network(
                                      data.flowerImageURL,
                                      width: 200,
                                      height: 100,
                                      fit: BoxFit.cover,
                                    ))),
                            Flexible(
                                child: Text(data.flowerName,
                                    style: TextStyle(fontSize: 18))),
                          ]),
                        ),
                        Divider(color: Colors.black),
                      ],
                    ),
              ))
              .toList(),
        );
          },
        ),
      ),
    ]));
  }

Answer 2

Setup

Start a new Flutter project. I'm calling mine flutter_listview.

Open main.dart and replace the code with the following:

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ListViews',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('ListViews')),
        body: BodyLayout(),
      ),
    );
  }
}

class BodyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _myListView(context);
  }
}

// replace this function with the code in the examples
Widget _myListView(BuildContext context) {
  return ListView();
}

Note the _myListView() function at the end. You will be replacing this with the code in the examples below

Basic types of ListViews

Static ListView

If you have a short list of items that don't change, then you can use the default ListView constructor to make it. This is useful for making something like a settings menu page.

Replace _myListView() with the following:

 Widget _myListView(BuildContext context) {
  return ListView(
    children: <Widget>[
      ListTile(
        title: Text('Sun'),
      ),
      ListTile(
        title: Text('Moon'),
      ),
      ListTile(
        title: Text('Star'),
      ),
    ],
  );
}

Run the app and you should see the following image. (After this when refreshing, usually hot reload works fine, but I find at times I need to do a hot restart or even completely stop and restart the app.)

ListTile customization

The Flutter team designed the ListTile widget to handle the normal content that you would want in a list. This means that most of the time there is no need to define a custom layout. You can just use the default ListTile for each item in the list. When we made a ListView in the example above we only used the title option. But we can also show subtitles, images, and icons.

Replace _myListView() with the following

 Widget _myListView(BuildContext context) {
  return ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text('Sun'),
      ),
      ListTile(
        leading: Icon(Icons.brightness_3),
        title: Text('Moon'),
      ),
      ListTile(
        leading: Icon(Icons.star),
        title: Text('Star'),
      ),
    ],
  );
}

The leading is for adding an icon or image at the start of the ListTile.

You can also add an icon at the end if you specify the trailing attribute.

ListTile(
  leading: Icon(Icons.wb_sunny),
  title: Text('Sun'),
  trailing: Icon(Icons.keyboard_arrow_right),
)

The right arrow icon makes it look like the list items are clickable, but they aren't. Not yet. We will see how to add touch events in the next section. It's easy. (Hint: onTap )

Instead of icons, we can also use images. The recommended image option is to use a CircleAvatar widget.

Replace _myListView() with the following:

   Widget _myListView(BuildContext context) {
  return ListView(
    children: <Widget>[
      ListTile(
        leading: CircleAvatar(
          backgroundImage: AssetImage('assets/sun.jpg'),
        ),
        title: Text('Sun'),
      ),
      ListTile(
        leading: CircleAvatar(
          backgroundImage: AssetImage('assets/moon.jpg'),
        ),
        title: Text('Moon'),
      ),
      ListTile(
        leading: CircleAvatar(
          backgroundImage: AssetImage('assets/stars.jpg'),
        ),
        title: Text('Star'),
      ),
    ],
  );
}

If you want MASTERING FLUTTER LISTVIEWS enter link description here