Я пытаюсь получить изображения из firebase с помощью виджета StreamBuilder. Перепробовал все что знаю но результата нет. Когда классы связаны друг с другом, все запутывается. здесь изображения извлекаются из списка, созданного вручную, как указано выше, но я хочу заменить их изображениями из Firebase. Пожалуйста, просмотрите код и справку
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(),
),
),
);
}
}
И это для прокрутки карты
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,
);
}),
);
}
}
Список изображений, созданный вручную
List<String> images = [
"assets/image_04.jpg",
"assets/image_03.jpg",
"assets/image_02.jpg",
"assets/image_01.png",
];