问题描述
我正在构建一个应用程序,并且想要在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 projectMessenger Gradient Github
希望它对您有帮助!
这篇关于如何在Flutter中重新创建Facebook Messenger渐变效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!