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

Question

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

如果我知道小部件在构建方法中的位置，我就可以计算小部件的梯度。

小部件渲染后，我可以通过在构建方法中分配给小部件的 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 渐变效果

How to recreate the Facebook Messenger gradient effect in Flutter

user-interface

gradient

flutter