How to recreate the Facebook Messenger gradient effect in Flutter - user-interface

Question

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/
If I would know the widget's position in the build method, I could calculate the gradient of the widget.
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.

Answer 1

I used ColorFiltered Widget to make Facebook Messenger's gradient.
In a
Stack["gradient you want to apply", "ColorFiltered Widget which is parent of your ListView", ...]
put your Listview in ColorFiltered widget by child, pick filter, and you're done.
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;
}
This is my GitHub of this project
Messenger Gradient Github
I hope it helped you!!