تصميم صفحة تطبيق messanger مع تدرج الالوان اثناء عمل Scroll

تصميم صفحة تطبيق messanger مع تدرج الالوان اثناء عمل Scroll

سؤال كان يراودني منذ مده كيف يقوم تطبيق المحادثات الشهير messanger التابع لفيسبوك بامكانيه عمل تدرج لوني للنص بحيث النص في الاعلى لون وبالاسف يكون لون اخر مختلف وعند عمل scroll للشاشه نشاهد ان اللون يتدرج ايضا كيف يستطيع التطبيق عمل هذه العمليه او حتى كيف اقوم بتنفيذها ؟ ببساطة الامر سهل جدا وسوف نقوم بشرحه لكم في هذه المقال وباختصار هو عباره عن stack يكون خلف النص يظهر عليه او بالاصح صورة ثابته يظهر عليها النص وعند عمل سكرول النص يتغير ولكن اللون يبقى كما هو ولهذا احببنا مشاركة الكود المصدر معكم حتى تصبحون قادرون على تنفيذ العمليه ايضا بسهوله .

Gradation of colors in Flutter Chat

تمت كتابة الكود دفعه واحده في هذا ويمكنك التعديل على الكود والتغيير فيه كما ترغب بدون مشاكل الامر فقط متعلق بامكانيتك بتنفيذ الامر وعمل التدرج اللوني او حتى ادراج صورة او اي تصميم ترغب به في النهايه القرار يرجع لك في الشكل النهائي وايضا قمنا بعمل model يحتوي على النص واذا كانت الرسائله تابعه لنا ام لا وفي نهايه الكود ايضا ارفقنا لك الكود حتى موقع github الشهير حتى تكون قادر على التعامل معه بسهوله سواء ترغب بنسخه من موقعنا او حتى من موقع الجيت هب .

ui.dart

import 'package:flutter/material.dart';

class Messages {
  String content;
  bool sendByMe;

  Messages({required this.content, required this.sendByMe});
}


class GeeCoders extends StatefulWidget {
  const GeeCoders({Key? key}) : super(key: key);

  @override
  State<GeeCoders> createState() => _GeeCodersState();
}

class _GeeCodersState extends State<GeeCoders> {
  final List<Messages> msgs = [
    Messages(content: 'Hey, there', sendByMe: true),
    Messages(content: 'I am fine', sendByMe: true),
    Messages(content: 'What about you?', sendByMe: false),
    Messages(content: 'I am also fine', sendByMe: true),
    Messages(content: 'Nice to hear that', sendByMe: false),
    Messages(content: 'Yeah', sendByMe: true),
    Messages(content: 'How is your day going?', sendByMe: false),
    Messages(content: 'It is going good', sendByMe: true),
    Messages(content: 'Nice', sendByMe: false),
    Messages(content: 'What are you doing?', sendByMe: false),
    Messages(content: 'I am chatting with you', sendByMe: true),
    Messages(content: 'Hey, there', sendByMe: true),
    Messages(content: 'How are you?', sendByMe: false),
    Messages(content: 'I am fine', sendByMe: true),
    Messages(content: 'What about you?', sendByMe: false),
    Messages(content: 'I am also fine', sendByMe: true),
    Messages(content: 'Nice to hear that', sendByMe: false),
    Messages(content: 'Yeah', sendByMe: true),
    Messages(content: 'How is your day going?', sendByMe: false),
    Messages(content: 'It is going good', sendByMe: true),
    Messages(content: 'Nice', sendByMe: false),
    Messages(content: 'What are you doing?', sendByMe: false),
    Messages(content: 'I am chatting with you', sendByMe: true),
    Messages(content: 'Ohh', sendByMe: false),
    Messages(content: 'What are you doing?', sendByMe: true),
    Messages(content: 'I am chatting with you', sendByMe: false),
    Messages(content: 'Ohh', sendByMe: true),
    Messages(content: 'What are you doing?', sendByMe: false),
  ];

  final double kBubblePadding = 8;
  final BoxConstraints bubbleConstraints = const BoxConstraints(maxWidth: 250);
  final Color backgroundColor = Colors.black54;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: SafeArea(
        child: Stack(
          fit: StackFit.expand,
          children: [
            Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.orangeAccent,
                    Colors.purpleAccent,
                    Colors.blue,
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
              ),
            ),
            LayoutBuilder(
              builder: (BuildContext context, BoxConstraints viewportConstraints) {
                return SingleChildScrollView(
                  physics: const ClampingScrollPhysics(),
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: viewportConstraints.maxHeight,
                    ),
                    child: IntrinsicHeight(
                      child: Column(
                        children: _buildBubbles(),
                      ),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

  List<Widget> _buildBubbles() {
    final List<Widget> children = <Widget>[];
    for (Messages msg in msgs) {
      children.add(
        Stack(
          children: [
            ColorFiltered(
              colorFilter: ColorFilter.mode(
                backgroundColor,
                msg.sendByMe ? BlendMode.srcOut : BlendMode.dstATop,
              ),
              child: _buildBubbleLayer(msg.content, isMine: msg.sendByMe),
            ),
            _buildBubbleLayer(msg.content, isMine: msg.sendByMe, showText: true)
          ],
        ),
      );
    }
    return children
      ..add(Expanded(child: Container(color: backgroundColor)))
      ..insert(0, Container(height: 8, color: backgroundColor));
  }

  Widget _buildBubbleLayer(String message, {bool isMine = false, bool showText = false}) {
    return Container(
      width: double.infinity,
      color: showText ? null : Colors.transparent,
      alignment: isMine ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        constraints: bubbleConstraints,
        margin: const EdgeInsets.fromLTRB(12, 0, 12, 8),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: showText ? null : const Color(0xff0c46da),
          ),
          padding: EdgeInsets.all(kBubblePadding),
          child: Text(
            message,
            style: TextStyle(
              color: showText ? Colors.white : Colors.transparent,
            ),
          ),
        ),
      ),
    );
  }

}