如何在Flutter中重新创建Facebook Messenger渐变效果 [英] How to recreate the Facebook Messenger gradient effect in Flutter

问题描述

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

I'm building an application and I want to create an effect similar to this in a ListView. https://css-tricks.com/recreating-the-facebook-messenger-gradient-effect-with-css/

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

If I would know the widget's position in the build method, I could calculate the gradient of the widget.

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

After the widget is rendered, I can get the position of the widget by a GlobalKey that is assigned to the widget in the build method. This approach isn't working in my case, because I need the position in order to render the widget with the correct gradient.

推荐答案

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

I used ColorFiltered Widget to make Facebook Messenger's gradient.

在

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

按子项将Listview放入ColorFiltered小部件中，选择过滤器，就完成了.

put your Listview in ColorFiltered widget by child, pick filter, and you're done.

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

I used Firebase Cloud Firestore to make my messenger real-time so there's Streambuildter in my code.

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),
                );
              },
            ),
          ),
        ),
      ),

这在下面成为聊天气泡列表.

This below makes chatbubblelist.

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梯度Github

This is my GitHub of this project Messenger Gradient Github

希望它对您有帮助！

这篇关于如何在Flutter中重新创建Facebook Messenger渐变效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！