Adding Card to ListView
I figured it out, the whole problem was in using itemExtent: 25.0,
at ListView.builder
by removing it, everything became expandable by default and run smoothly.
While searching for the solution, I came across this and this and this, that helped me rebuilding the app in a cleaner code, below it is for who is interested:
main.dart
:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'BabyModel.dart';
import 'BabyCard.dart';
void main() => runApp(MyApp(
textInput: Text("Text Widget"),
));
class MyApp extends StatefulWidget {
final Widget textInput;
MyApp({this.textInput});
@override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
bool checkBoxValue = false;
@override
Widget build(BuildContext ctxt) {
return StreamBuilder(
stream: Firestore.instance.collection('baby').snapshots(),
builder: (_, AsyncSnapshot<QuerySnapshot> snapshot) {
var documents = snapshot.data?.documents ?? [];
var baby =
documents.map((snapshot) => BabyData.from(snapshot)).toList();
return BabyPage(baby);
},
);
}
}
class BabyPage extends StatefulWidget {
final List<BabyData> allBaby;
BabyPage(this.allBaby);
@override
State<StatefulWidget> createState() {
return BabyPageState();
}
}
class BabyPageState extends State<BabyPage> {
@override
Widget build(BuildContext context) {
// var filteredBaby = widget.allFish.where((BabyData data) {
// data.name = 'Dana';
// }).toList();
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
child: ListView.builder(
itemCount: widget.allBaby.length,
padding: const EdgeInsets.only(top: 10.0),
itemBuilder: (context, index) {
return BabyCard(widget.allBaby[index]);
})
),
)));
}
}
BabyModel.dart
:
import 'package:cloud_firestore/cloud_firestore.dart';
class BabyData {
final DocumentReference reference;
String name;
int vote;
BabyData.data(this.reference,
[this.name,
this.vote]) {
// Set these rather than using the default value because Firebase returns
// null if the value is not specified.
this.name ??= 'Frank';
this.vote ??= 7;
}
factory BabyData.from(DocumentSnapshot document) => BabyData.data(
document.reference,
document.data['name'],
document.data['vote']);
void save() {
reference.setData(toMap());
}
Map<String, dynamic> toMap() {
return {
'name': name,
'vote': vote,
};
}
}
BabyCard.dart
:
import 'package:flutter/material.dart';
import 'BabyModel.dart';
class BabyCard extends StatefulWidget {
final BabyData baby;
BabyCard(this.baby);
@override
State<StatefulWidget> createState() {
return BabyCardState(baby);
}
}
class BabyCardState extends State<BabyCard> {
BabyData baby;
String renderUrl;
BabyCardState(this.baby);
Widget get babyCard {
return
new Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: const Icon(Icons.album),
title: Text('The ${baby.name} is having:'),
subtitle: Text('${baby.vote} Votes.'),
),
new ButtonTheme.bar( // make buttons use the appropriate styles for cards
child: new ButtonBar(
children: <Widget>[
new FlatButton(
child: const Text('Thumb up'),
onPressed: () { /* ... */ },
),
new FlatButton(
child: const Text('Thumb down'),
onPressed: () { /* ... */ },
)]))]));
}
@override
Widget build(BuildContext context) {
return new Container(
child: babyCard,
);
}
}
And the output is: