تصميم لايقونة الشات مثل تطبيق واتساب في flutter باسهل طريقة

تصميم لايقونة الشات مثل تطبيق واتساب في flutter باسهل طريقة

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

bubble: ^1.2.1

How to create char bubble in flutter project

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

ui.dart

Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Bubble(
                  margin: BubbleEdges.only(top: 10),
                  alignment: Alignment.topRight,
                  nip: BubbleNip.rightTop,
                  color: Color.fromRGBO(225, 255, 199, 1.0),
                  child: Text('Hello, World! Hello, World! Hello, World! Hello, World!',),
                ),
                Bubble(
                  margin: BubbleEdges.only(top: 10),
                  alignment: Alignment.topRight,
                  nip: BubbleNip.rightTop,
                  color: Color.fromRGBO(225, 255, 199, 1.0),
                  child: Text('geecoders is here ...',),
                ),
                Bubble(
                  margin: BubbleEdges.only(top: 10),
                  alignment: Alignment.topLeft,
                  nip: BubbleNip.leftTop,
                  color: Color.fromRGBO(148, 216, 243, 1.0),
                  child: Text('Hello, World! Hello, World! Hello, World! Hello, World!',),
                ),
              ],
            ),
          )
          

How to create char bubble in flutter project without packages

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

ui2.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;

class ChatPage extends StatelessWidget {
  const ChatPage({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) => Scaffold(
          body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              decoration: const BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("assets/img/background/story-content.png"),
                      fit: BoxFit.cover,
                      opacity: 0.1,
                  )),
              child: ListView(
                shrinkWrap: true,
                children: const [
                  SentMessageScreen(message: "Hello"),
                  ReceivedMessageScreen(message: "Hi, how are you"),
                  SentMessageScreen(message: "I am great how are you doing"),
                  ReceivedMessageScreen(message: "I am also fine"),
                  SentMessageScreen(message: "Can we meet tomorrow?"),
                  ReceivedMessageScreen(message: "Yes, of course we will meet tomorrow"),
                  ReceivedMessageScreen(message: "Yes, of course we will meet tomorrow"),
                  ReceivedMessageScreen(message: "Yes, of course we will meet tomorrow"),
                  SentMessageScreen(message: "I am great how are you doing"),
                  ReceivedMessageScreen(message: "Yes, of course we will meet tomorrow"),
                ],
              ),
            ),
          ],
        ),
      ));
}

class CustomShape extends CustomPainter {
  final Color bgColor;

  CustomShape(this.bgColor);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = bgColor;

    var path = Path();
    path.lineTo(-5, 0);
    path.lineTo(0, 10);
    path.lineTo(5, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

class SentMessageScreen extends StatelessWidget {
  final String message;

  const SentMessageScreen({Key? key, required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Transform(
          alignment: Alignment.center,
          transform: Matrix4.rotationY(math.pi),
          child: CustomPaint(
            painter: CustomShape(Colors.grey[300]!),
          ),
        ),
        Container(
          padding: const EdgeInsets.all(14),
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: const BorderRadius.only(
              topRight: Radius.circular(18),
              bottomLeft: Radius.circular(18),
              bottomRight: Radius.circular(18),
            ),
          ),
          child: Text(
              message,
            style: const TextStyle(color: Colors.black, fontSize: 14),
          ),
        ),
      ],
    );
  }
}

class ReceivedMessageScreen extends StatelessWidget {
  final String message;

  const ReceivedMessageScreen({Key? key, required this.message})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 5.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.all(14),
            decoration: BoxDecoration(
              color: Colors.cyan[900],
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(18),
                bottomLeft: Radius.circular(18),
                bottomRight: Radius.circular(18),
              ),
            ),
            child: const Text(
              'asdasdasdasd asd asd asd',
              style: TextStyle(color: Colors.white, fontSize: 14),
            ),
          ),
          CustomPaint(painter: CustomShape(Colors.cyan[900]!)),
        ],
      ),
    );
  }
}