Блог

Главная - Вопросы по программированию - Использование FutureBuilder с SliverAppBar

Использование FutureBuilder с SliverAppBar

#flutter #dart

Вопрос:

Я новичок, и я все еще пытаюсь получить виджеты и концепцию упаковки. Для меня, вероятно, это самая трудная часть обучения Флаттеру.

У меня есть панель приложений Sliver, и мне нужно получить некоторые данные и использовать FutureBuilder. Вот код

 @override
  Widget build(BuildContext context) => Scaffold(
        body: CustomScrollView(
          
          slivers: [
            SliverAppBar(
              backgroundColor: Colors.red,
              expandedHeight: 200,
              floating: true,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.network(
                  'https://source.unsplash.com/random?monochromatic dark',
                  fit: BoxFit.cover,
                ),
                title: Text('Flexible Title'),
                centerTitle: true,
              ),
              //title: Text('My App Bar'),
              leading: Icon(Icons.arrow_back),
              actions: [
                Icon(Icons.settings),
                SizedBox(width: 12),
              ],
            ),
          ],
        ),
      );
}

поэтому моя проблема в том, как я могу интегрировать свой фрагмент FutureBuilder в этот код.

Вот FutureBuilder:

 FutureBuilder<Article>(
          future: _futureArticle,
          builder: (BuildContext context, AsyncSnapshot<Article> snapshot) {
            if (snapshot.hasData) {
              final article = snapshot.data?.data;

любая помощь

Комментарии:

1. Можете ли вы объяснить, что такое статья и что вы хотите с ней сделать? Это что, Виджет? Если да, то где вы хотите его отобразить?

Ответ №1:

Правильная упаковка:

 Widget build(BuildContext context) => Scaffold(
        body: FutureBuilder<Article>(
          future: _futureArticle,
          builder: (BuildContext context, AsyncSnapshot<Article> snapshot) {
            if (snapshot.hasData) {
              final article = snapshot.data?.data;
              return CustomScrollView(
                slivers: [
                  SliverAppBar(
                    // backgroundColor: Colors.red,
                    expandedHeight: 200,
                    floating: true,
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Image.network(article == null
                          ? 'https://www.tonymacx86.com/attachments/2019-02-05-07-50-43-jpeg.385401/'
                          : article.imageUrl!),
                      title: Text('${article!.title}'),
                      centerTitle: true,
                    ),
                    leading: const Icon(Icons.arrow_back),
                    actions: const [
                      Icon(Icons.settings),
                      SizedBox(width: 12),
                    ],
                  ),
                ],
              );
            }
            return const Center(
              child: CircularProgressIndicator(),
            );
          },
        ),
      );
}
Метки: