How to recreate the Facebook Messenger gradient effect in Flutter

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!!