Блог

Я создаю приложение и хочу создать эффект, подобный этому, в ListView. https://css-tricks.com/recreating-the-facebook-messenger-gradient-effect-with-css

Если бы я знал положение виджета в методе сборки, я мог бы рассчитать градиент виджета.

После рендеринга виджета я могу получить положение виджета с помощью GlobalKey, который присваивается виджету в методе сборки. В моем случае этот подход не работает, потому что мне нужна позиция, чтобы отобразить виджет с правильным градиентом.

Я использовал ColorFiltered Widget для создания градиента Facebook Messenger.

В

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

поместите свой Listview в дочерний виджет с цветным фильтром, выберите фильтр, и все готово.

Я использовал 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),
                );
              },
            ),
          ),
        ),
      ),
  

Это ниже делает 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 Gradient Github

Я надеюсь, что это помогло вам!!