ویجت 8 (Spacerدر فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی Spacer

در ویجت Row و Column میتونستیم فضا های بین ان را مدیریت کنیم چطوری به مثال زیر دقت کنید

class RowColumnAlignment extends StatelessWidget {
  List colors = [Colors.teal, Colors.red, Colors.blue];  _sampleWidget() => List<Widget>.generate(colors.length, (index) {
        return new Container(
          color: colors[index],
          height: 50,
          width: 50,
        );
      });  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(&quotSpacer and alignment&quot),
        ),
        body: Container(
            padding: EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 16.0,
                ),
                Text(
                    &quotItems are evenly distributed in the line with equal space around them (space around)&quot),
                SizedBox(
                  height: 8.0,
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: _sampleWidget()),
                SizedBox(
                  height: 16.0,
                ),
                Text(
                    &quotItems Spread across the screen however keeps equal space in  between (space between)&quot),
                SizedBox(
                  height: 8.0,
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: _sampleWidget()),
                SizedBox(
                  height: 16.0,
                ),
                Text(
                    &quotitems are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same (Space evenly)&quot),
                SizedBox(
                  height: 8.0,
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: _sampleWidget()),
              ],
            )));
  }
}

با استفاده از spaceAround فضای خالی بین ویجت هامون را پر میکنه و گوشه ها به اندازه ی نصف فضای میانی تقسیم بندی می شوند

با استفاده از spaceBetween فقط فضای میانی به فاصله ی یکسان از هم ویجت ها قرار می گیرند و گوشه ها فضای خالی ایجاد نمی شود

با استفاده از spaceEvenly گوشه ها و میان ویجت ها به یک اندازه فاصله ایجاد می شود

به خروجی زیر دقت کنید

اما ایا این همه چیز است ؟ نمیشه بیش تر دست برد شاید بخواهیم فاصله ی یک ویجت برابر نباشه مثلا یکی دو برابر دیگری باشه

اما از انجایی که فلاتر برای هر کاری راه حل خودش را داره پس غصه ی چی را باید خورد :)

به کد زیر دقت کنید

//Spacer example
class AlignmentWithSpacer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text(&quotAlligment with Spacer&quot),
        ),
        body: Container(
            padding: EdgeInsets.only(top: 16.0),
            child: Row(children: [
              Container(
                color: Colors.red,
                height: 50,
                width: 50,
              ),
              Spacer(), // default flex is 1
              Container(
                color: Colors.red,
                height: 50,
                width: 50,
              ),
              Spacer(
                flex: 2,
              ), // flex is 2
              Container(
                color: Colors.red,
                height: 50,
                width: 50,
              )
            ])));
  }
}

و خروجی ان

با استفاده از این ویجت و مقدار flex به راحتی تونستیم فاصله ها را متناسب با نیازمان تغییر بدهیم

به همین سادگی به همین خوشمزگی.

اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?

ایدی کانال برای دسترسی به تمام اموزش ها @Learnpg

لینک کانال https://t.me/joinchat/AAAAAFDR-mppe-ciC6X1Qg

ایدی تلگرام بنده @pejmanprogrammer

روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)