Flutter မှာ မြန်မာနိုင်ငံတော် အလံ ဆွဲကြမယ်

ဖွဘုတ် ပွတ်ရင်းနဲ့ Memories မှာ ကိုအိမောင်လုပ်ထားတဲ့ CSS နဲ့ ဆွဲထားတဲ့ မြန်မာနိုင်ငံပုံတက်လာတော့ Flutter မှာလည်း ဆွဲလို့ရသားပဲ ဆိုပြီး စဉ်းစားမိတယ်။ အဲဒါနဲ့ပဲ လုပ်ဖြစ်သွားတယ် ဆိုပါစို့။

ခွဲခြမ်းစိတ်ဖျာကြည့်တဲ့အခါ

အလံကို အဓိက အစိတ်အပိုင်းအနေနဲ့ ကြယ်ရယ်၊ အနောက်က ဝါစိမ်းနီ ၃ တန်းရယ်ဆိုပြီး ခွဲလိုက်လို့ရတယ်။ ကြယ်ကို ခဏထားလိုက်ဦး၊ အနောက်က ၃ ခုတန်းကို အရင်လုပ်ကြည့်ရအောင်။

ရိုးရိုးလေး တွေးလိုက်ရင်တော့ အဲဒီ ၃ ခုတန်းဆိုတာက လေးထောင့်တုံး ၃ ခုပါပဲ။ အဲဒါတွေကို Container နဲ့ သုံးလို့ရပါတယ်။

    Container(
      color: Colors.yellow, //အဝါ
    ),

ဒီအတိုင်းဆို Container ရဲ့ အလျားက Screen အပြည့်ယူနေမှာဖြစ်တဲ့ အတွက် သူ့ကို width နဲ့ height သတ်မှတ်လိုက်ပါမယ်။

Container(
   color: MMFlagColors().mmYellow, //အဝါ
   height: 50,
   width: 250,
),

Container(
   color: MMFlagColors().mmGreen, //အစိမ်း
   height: 50,
   width: 250,
),
                   

Container(
    color: MMFlagColors().mmRed, //အနီ
    height: 50,
    width: 250,
),

မြန်မာနိုင်ငံ အလံရဲ့ ဝါစိမ်းနီ ၃ ရောင်က သတ်မှတ်ချက် ရှိတဲ့ အတွက် Wiki မှာ ပြောထားတဲ့ အရောင်တွေ ထည့်လိုက်ပါတယ်။​ ဒီမှာ Class အသစ်မဆောက်ပဲ အပေါ်က Container ရဲ့ color: နေရာမှာ တန်းထည့်လို့လည်း ရပါတယ်။

class MMFlagColors {

  // According to Wikipedia, Myanmar Flag's colors are as follows.
  
  Color mmYellow = Color(0xffFECB00);
  Color mmGreen = Color(0xff34B233);
  Color mmRed = Color(0xffEA2839);
}

ကြယ် ဆောက်မယ်

ကြယ် ရေးမယ်ဆိုရင် ကြယ်ပုံဆွဲတာဖြစ်တဲ့အတွက် Custom Clipper ကို သုံးပါမယ်။ Path ရဲ့ lineTo နဲ့ ဘယ်နေရာ ဘယ်နေရာ ဆိုတာကို ပြောပြီး ကျွန်တော်တို့ လိုချင်တဲ့ ပုံစံဖြစ်အောင် ပုံသွင်းလို့ ရပါတယ်။

size.width ဆိုတာ screen ရဲ့ လက်ရှိ အလျား ပါ။ 0.5 နဲ့ မြှောက်လိုက်တော့ တစ်ဝက်တိတိမှာ နေရာစယူပါတယ်။ အဲဒီကနေ စပြီးဆွဲပါတယ်။

class _StarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width * 0.5, size.height * 0.175);
    path.lineTo(size.width * 0.45, size.height * 0.4);
    path.lineTo(size.width * 0.30, size.height * 0.4);
    path.lineTo(size.width * 0.425, size.height * 0.55);
    path.lineTo(size.width * 0.375, size.height * 0.8);
    path.lineTo(size.width * 0.5, size.height * 0.65);
    path.lineTo(size.width * 0.625, size.height * 0.8);
    path.lineTo(size.width * 0.575, size.height * 0.55);
    path.lineTo(size.width * 0.70, size.height * 0.4);
    path.lineTo(size.width * 0.55, size.height * 0.4);
    path.lineTo(size.width * 0.5, size.height * 0.175);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

သူ့ကို ခေါ်သုံးမယ်ဆိုရင်တော့ ClipPath ဆိုတဲ့ Widget မှာ ခေါ်သုံးလို့ရပါတယ်။

ClipPath(
  child: Container(
     color: Colors.white,
  ),
  clipper: _StarClipper(),
),

နှစ်ခုပြန်ထပ်မယ်

စောစောက Container တွေနဲ့  ကြယ်ကို Stack Widget နဲ့ ထပ်လိုက်တာနဲ့ မြန်မာနိုင်ငံအလံရပါပြီ။

Stack(
  children: [
    Positioned.fill(
       child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
              Container(
                 color: MMFlagColors().mmYellow,
                 height: 50,
                 width: 250,
               ),
               
               Container(
                  color: MMFlagColors().mmGreen,
                  height: 50,
                  width: 250,
                ),
                
                Container(
                   color: MMFlagColors().mmRed,
                   height: 50,
                   width: 250,
                ),
           ],
        ),
     ),
     Positioned.fill(
        child: ClipPath(
           child: Container(
             color: Colors.white,
           ),
           clipper: _StarClipper(),
         ),
      ),
              
   ],
),

Code အပြည့်အစုံ စမ်းရန်

(ရလဒ်ကို ကြည့်ရှုရန် Run ကို နှိပ်ပါ)

Github Gist မှာလည်း ကြည့်လို့ရပါတယ်။

ကျေးဇူးတင်ပါတယ်။