Question

我正在构建一个应用程序，并且想要在ListView中创建与此类似的效果。 https://css-tricks.com/recreating-the-facebook-messenger-gradient-effect-with-css/

如果我想知道小部件在build方法中的位置，就可以计算小部件的坡度。

渲染小部件之后，我可以通过在build方法中分配给小部件的GlobalKey来获取小部件的位置。在我的情况下，这种方法不起作用，因为我需要该位置才能以正确的渐变呈现小部件。

Answer 1

我使用了ColorFiltered Widget来制作Facebook Messenger的渐变。

在

Stack["gradient you want to apply", "ColorFiltered Widget which is parent of your ListView", ...]

按子项将Listview放入ColorFiltered小部件中，选择过滤器，即可完成。

我使用Firebase Cloud Firestore实时创建了Messenger，因此我的代码中包含Streambuildter。

Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Colors.pinkAccent,
              Colors.deepPurpleAccent,
              Colors.lightBlue,
            ],
          ),
        ),
      ),
      Center(
        child: Container(
          alignment: Alignment.topCenter,
          width: MediaQuery.of(context).size.width,
          child: SingleChildScrollView(
            controller: _scrollController,
            reverse: true,
            physics: ClampingScrollPhysics(),
            child: StreamBuilder(
              stream: Firestore.instance.collection('message').snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return Container(
                    padding: EdgeInsets.all(100),
                    color: Colors.transparent,
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.white,
                    ),
                  );
                }
                return Column(
                  children: _chatmulticolorbubbles(snapshot.data),
                );
              },
            ),
          ),
        ),
      ),

这在下面成为聊天列表。

List<Widget> _chatmulticolorbubbles(data) {
List<Widget> list = [];

list.add(_dumpspace(10.0));

//print(data.documents[0]['chat'].toString());

var _wasme;

list.add(_chatbubble(
    data.documents[0]['chat'], data.documents[0]['who'], false));

_wasme = data.documents[0]['who'];

for (var i = 1; i < data.documents.length; i++) {
  if (data.documents[i]['who'] == true)
    _wasme
        ? list.add(_chatbubble(
            data.documents[i]['chat'], data.documents[i]['who'], true))
        : list.add(_chatbubble(
            data.documents[i]['chat'], data.documents[i]['who'], false));
  else
    _wasme
        ? list.add(_chatbubble(
            data.documents[i]['chat'], data.documents[i]['who'], true))
        : list.add(_chatbubble(
            data.documents[i]['chat'], data.documents[i]['who'], false));
}

list.add(_dumpspace(80.0));

return list;

}

这是我这个项目的GitHub Messenger Gradient Github

希望它对您有帮助！

如何在Flutter中重新创建Facebook Messenger渐变效果

1 个答案: