如何在一个屏幕上收听两种不同的期货?

时间:2019-08-10 19:47:16

标签: flutter dart

我正在学习学习动笔,并构建一个简单的词汇应用程序。我有一个来自sqlLite数据库的未来,另一个来自twitter api。我只知道如何用builder创建一个状态类。

所以_tweet方法,我需要在占位符/硬编码tweet点中显示它。但这不起作用。

import 'package:flutter/material.dart';
import '../../resources/dbprovider.dart';
import '../../resources/tweetprovider.dart';
import '../../data/models/word.dart';
import 'package:tweet_webview/tweet_webview.dart';

class WordCard extends StatefulWidget {
  final int id;

  WordCard({
    this.id,
  });

  @override
  State<StatefulWidget> createState() {
    return _WordCardState();
  }
}

class _WordCardState extends State<WordCard> {
  @override
  Widget build(BuildContext context) {
    final dbProvider = DBProvider.get();
    return Scaffold(
        appBar: AppBar(
          title: Text('Meme Vocab'),
        ),
        body: FutureBuilder<Word>(
            future: dbProvider.getWordByID(widget.id),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                Word word = snapshot.data;
                return _card(word);
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            }));
  }

  Widget _card(Word word) {
    return Padding(
      padding: EdgeInsets.all(15.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            word.word.trim(),
            style: new TextStyle(
                fontFamily: "Roboto",
                fontSize: 40.0,
                fontWeight: FontWeight.bold,
                color: Colors.black.withOpacity(0.45)),
            textAlign: TextAlign.left,
          ),
          Text(
            word.definition,
            style: new TextStyle(
                fontFamily: "Roboto",
                fontSize: 20.0,
                fontStyle: FontStyle.italic),
            textAlign: TextAlign.left,
          ),
          TweetWebView.tweetUrl(
              "https://twitter.com/realDonaldTrump/status/1159898199802425344") //placeholder
        ],
      ),
    );
  }
}

//Don't know where to put this widget so it renders, how to return the tweets I fetch.
Future<Widget> _tweet(Word word) async {
  final tweetProvider = TweetProvider();
  List<int> tweets = await tweetProvider.getRelevantTweetIDs(word);

  final list = ListView.builder(
    scrollDirection: Axis.vertical,
    padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
    itemCount: tweets.length,
    itemBuilder: (context, index) {
      var tweetID = tweets[index].toString();
      return Card(
        child: TweetWebView.tweetID(tweetID),
      );
    },
  );

  final container =
      Container(color: Colors.black26, child: Center(child: list));

  return container;
}

1 个答案:

答案 0 :(得分:0)

我发现Future Builder小部件是必经之路。我可以将它放在TweetWebView的地方,或者基本上我可以将其放在有内容未来的小部件的任何地方。

 FutureBuilder(
            future: tweetProvider.getRelevantTweetIDs(word),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  print('something went wrong while fetching tweets');
                }
                return Expanded(child: _tweetList(snapshot.data));
              } else {
                return Center(child: CircularProgressIndicator());
              }
            },
          )