CODEWITHSUNDEEP
dartflutter
serjo macken
serjo macken

Reputation: 445

add a subtitle in my flutter code

I have this flutter code :

body: StreamBuilder(
          stream: Firestore.instance.collection('Doctors').snapshots(),
          builder:
              (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (!snapshot.hasData)
              return const Center(child: CircularProgressIndicator());
            return ListView(
              padding: const EdgeInsets.only(top: 8.0),
              children:
              snapshot.data.documents.map((DocumentSnapshot document) {
                return new Card(
                  child: new Container(
                    padding: EdgeInsets.all(10.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: Colors.grey,
                          backgroundImage:
                          new NetworkImage("${document['Picture']}"),
                          radius: 40.0,
                        ),
                        SizedBox(width: 10.0,
                        ),
                        Text(
                          document['Name'],
                        )
                      ],
                    ),
                  ),
                );
              }).toList(),
            );
          },
        ),
      ),

and I need to insert another text as a subtitle under the text connected to Text(document['Name'],) but i cant do so, can you help me please

Upvotes: 1

Views: 13966

Answers (4)

Nguyễn Văn Linh
Nguyễn Văn Linh

Reputation: 398

 title: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
    Text(
      "Title",
      style: TextStyle(color: Colors.white, fontSize: 16.0),
    ),
    Text(
      'Sub Title',
      style: TextStyle(color: Colors.white, fontSize: 14.0),
    ),
  ]),

This is final to use SubTitle in Appbar

Upvotes: 7

Natwar Singh
Natwar Singh

Reputation: 2275

I think you are trying to display list of data but I am not sure if you really need card style because your cards does not have gap. For your design you can use List Tile which have leading for circular image or avatar, title, subtitle and trailing in case you need. here is an example

return new Card(
  child: ListTile(        
    leading: CircleAvatar(
          backgroundColor: Colors.grey,
          backgroundImage: new NetworkImage("${document['Picture']}"),
          radius: 40.0,
        ),
    title: Text(document['name']),
    subtitle: Text('subtitle'),              
    ),
);

without card

return ListTile(        
    leading: CircleAvatar(
          backgroundColor: Colors.grey,
          backgroundImage: new NetworkImage("${document['Picture']}"),
          radius: 40.0,
        ),
    title: Text(document['name']),
    subtitle: Text('subtitle'),              
);

Upvotes: 0

goops17
goops17

Reputation: 1160

This is what you want, simply add ListTile

body: StreamBuilder(
          stream: Firestore.instance.collection('Doctors').snapshots(),
          builder:
              (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (!snapshot.hasData)
              return const Center(child: CircularProgressIndicator());
            return ListView(
              padding: const EdgeInsets.only(top: 8.0),
              children:
              snapshot.data.documents.map((DocumentSnapshot document) {
                return new Card(
                  child: new Container(
                    padding: EdgeInsets.all(10.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: Colors.grey,
                          backgroundImage:
                          new NetworkImage("${document['Picture']}"),
                          radius: 40.0,
                        ),
                        SizedBox(width: 10.0,
                        ),
                        new ListTile(
                         title: Text(document['name']),
                         subtitle: Text('subtitle'),
                      ],
                    ),
                  ),
                );
              }).toList(),
            );
          },
        ),
      ),

Upvotes: 1

Dhaval
Dhaval

Reputation: 2874

return new Card(
      child: new Container(
        padding: EdgeInsets.all(10.0),
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            CircleAvatar(
              backgroundColor: Colors.grey,
              backgroundImage: new NetworkImage("${document['Picture']}"),
              radius: 40.0,
            ),
            SizedBox(
              width: 10.0,
            ),
            Column(
              children: <Widget>[
                Text(document['name']),
                Text('subtitle'),
              ],
            )
          ],
        ),
      ),
    );

You can use something like this.

Upvotes: 0

Related Questions