1

I am trying to get images from firebase by using StreamBuilder widget. Tried all what I know but no result. As classes connected with each other tight everything gets tangled. here images are retrieved from manually created list as indicated above but I want to replace them with images from firebase. Please review code and help

class MyApp extends StatefulWidget { static const String id = 'Myapp_screen'; @override _MyAppState createState() => new _MyAppState(); } var cardAspectRatio = 12.0 / 16.0; var widgetAspectRatio = cardAspectRatio * 1.2; class _MyAppState extends State<MyApp> { var currentPage = images.length - 1.0; @override Widget build(BuildContext context) { PageController controller = PageController(initialPage: images.length - 1); controller.addListener(() { setState(() { currentPage = controller.page; }); }); return Scaffold( body: Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [ Color(0xEFEFEF), Color(0xFFFF), ], begin: Alignment.bottomCenter, end: Alignment.topCenter, tileMode: TileMode.clamp)), child: Scaffold( backgroundColor: Colors.transparent, body: SingleChildScrollView( child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.only( left: 12.0, right: 12.0, top: 30.0, bottom: 8.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ IconButton( icon: Icon( CustomIcons.menu, color: Colors.blue, size: 30.0, ), onPressed: () {}, ), IconButton( icon: Icon( Icons.search, color: Colors.blue, size: 30.0, ), onPressed: () {}, ) ], ), ), Padding( padding: EdgeInsets.symmetric(horizontal: 20.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text("Trending", style: TextStyle( color: Colors.blue, fontSize: 46.0, fontFamily: "Calibre-Semibold", letterSpacing: 1.0, )), IconButton( icon: Icon( CustomIcons.option, size: 12.0, color: Colors.white, ), onPressed: () {}, ) ], ), ), Padding( padding: const EdgeInsets.only(left: 20.0), child: Row( children: <Widget>[ Container( decoration: BoxDecoration( color: Color(0xFFff6e6e), borderRadius: BorderRadius.circular(20.0), ), child: Center( child: Padding( padding: EdgeInsets.symmetric( horizontal: 22.0, vertical: 6.0), child: Text("Animated", style: TextStyle(color: Colors.white)), ), ), ), SizedBox( width: 15.0, ), Text("25+ Stories", style: TextStyle(color: Colors.blueAccent)) ], ), ), Stack( children: <Widget>[ CardScrollWidget(currentPage), Positioned.fill( child: PageView.builder( itemCount: images.length, controller: controller, reverse: true, itemBuilder: (context, index) { return Container(); }, ), ) ], ), ], ), ), bottomNavigationBar: NavigationBottomBar(), ), ), ); } }

And this is for card scroll 

class CardScrollWidget extends StatelessWidget { var currentPage; var padding = 20.0; var verticalInset = 20.0; CardScrollWidget(this.currentPage); @override Widget build(BuildContext context) { return new AspectRatio( aspectRatio: widgetAspectRatio, child: LayoutBuilder(builder: (context, contraints) { var width = contraints.maxWidth; var height = contraints.maxHeight; var safeWidth = width - 2 * padding; var safeHeight = height - 2 * padding; var heightOfPrimaryCard = safeHeight; var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio; var primaryCardLeft = safeWidth - widthOfPrimaryCard; var horizontalInset = primaryCardLeft / 2; List<Widget> cardList = new List(); for (var i = 0; i < images.length; i++) { var delta = i - currentPage; bool isOnRight = delta > 0; var start = padding + max( primaryCardLeft - horizontalInset * -delta * (isOnRight ? 15 : 1), 0.0); var cardItem = Positioned.directional( top: padding + verticalInset * max(-delta, 0.0), bottom: padding + verticalInset * max(-delta, 0.0), start: start, textDirection: TextDirection.rtl, child: ClipRRect( borderRadius: BorderRadius.circular(16.0), child: Container( decoration: BoxDecoration(color: Colors.white, boxShadow: [ BoxShadow( color: Colors.black12, offset: Offset(3.0, 6.0), blurRadius: 10.0) ]), child: AspectRatio( aspectRatio: cardAspectRatio, child: Stack( fit: StackFit.expand, children: <Widget>[ Image.asset(images[i], fit: BoxFit.cover), Align( alignment: Alignment.bottomLeft, child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: EdgeInsets.symmetric( horizontal: 16.0, vertical: 8.0), child: Text(title[i], style: TextStyle( color: Colors.white, fontSize: 25.0, fontFamily: "SF-Pro-Text-Regular")), ), SizedBox( height: 10.0, ), Padding( padding: const EdgeInsets.only( left: 12.0, bottom: 12.0), child: Container( padding: EdgeInsets.symmetric( horizontal: 22.0, vertical: 6.0), decoration: BoxDecoration( color: Colors.blueAccent, borderRadius: BorderRadius.circular(20.0)), child: Text("Read Later", style: TextStyle(color: Colors.white)), ), ) ], ), ) ], ), ), ), ), ); cardList.add(cardItem); } return Stack( children: cardList, ); }), ); } }

Manually created list of images

List<String> images = [ "assets/image_04.jpg", "assets/image_03.jpg", "assets/image_02.jpg", "assets/image_01.png", ];
Improve this question
3
  • 1
    I don't see where you have tried to implement StreamBuilder Commented Apr 17, 2020 at 1:44
  • I am trying to add StreamBuilder widget but don't know how to do it properly without errors. Commented Apr 18, 2020 at 11:59
  • you should post what you have tried that is giving you an error so we at least know where you want to implement it Commented Apr 18, 2020 at 15:12

1 Answer 1

Reset to default
1 
Please add below StreamBuilder Widget code...<br> StreamBuilder( stream: Firestore.instance .collection('details') .document(documentId) .collection(collectionId) .orderBy('timestamp', descending: true) .limit(20) .snapshots(), builder: (context, snapshot) { if (!snapshot.hasData) { return Center( child: CircularProgressIndicator( valueColor: AlwaysStoppedAnimation<Color>(Colors.green))); } else { listMessage = snapshot.data.documents; return Padding( padding: const EdgeInsets.only( top: 5.0, right: 5.0, left: 5.0), child: ListView.builder( itemCount: snapshot.data.documents.length, reverse: true, itemBuilder: (context, index) => buildItem(index, snapshot.data.documents[index]), ), ); } }, ));

then make one method that return widget which contains layout of your ListView items.

Widget buildItem(int index, DocumentSnapshot document) { return Container( child: CachedNetworkImage( placeholder: (context, url) => Container( child: CircularProgressIndicator( valueColor: AlwaysStoppedAnimation<Color>(Colors.black), ), width: 200.0, height: 200.0, padding: EdgeInsets.all(70.0), decoration: BoxDecoration( color: Colors.lightGreen[200], borderRadius: BorderRadius.all( Radius.circular(8.0), ), ), ), imageUrl: document['imgUrl'], width: 200.0, height: 200.0, fit: BoxFit.cover, ), }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks a lot for the help I really appreciate. But be honest I got confused. Should I add AspectRatio widget with its content inside StreamBuilder?
Unfortunately I have created standard ListView.builder and added all information from firebase into Card widget with list design. I had to delete all previous code as it was getting tangled whenever I tried to touch it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.