ویجت 19 ( Wrap در فلاتر)

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

بعضی مواقع هنگام استفاده از Row یا Column ویجت ها بزرگتر از سایز صفحه هستند و اتفاق ناخوشایند زیر براتون میفته

و چهره مان در این لحظه :)

اما نگران نباشید فلاتر ویجت Wrap را برای حل این مشکل معرفی کرده که وقتی سطر یا ستون مورد نظر پر شد به سطر یا ستون بعدی می رود

و اما کد نویسی این ویجت به طور مثال

class WrapWidget extends StatefulWidget {
  @override
  _WrapWidgetState createState() => _WrapWidgetState();
}

class _WrapWidgetState extends State<WrapWidget> {

  BuildContext context; //global context

  @override
  Widget build(BuildContext context) {
    this.context = context;
    return Scaffold(
      appBar: AppBar(
        title: Container(
          child: Center(
            child: Text(
              'Wrap Widget',
              style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  fontFamily: Utils.ubuntuRegularFont),
            ),
          ),
          margin: EdgeInsets.only(right: 48),
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 16, bottom: 16),
                  child: Column(
                    children: <Widget>[
                      Text(
                        'Without Wrap widget',
                        style: TextStyle(
                            color: Colors.black87,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                            fontFamily: Utils.ubuntuRegularFont),
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 12, right: 12, top: 8),
                        child: Text(
                          'Here we observe that the layout is overflowing to the right\n'
                              'which results in a broken widget',
                          style: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 14.0,
                              fontStyle: FontStyle.italic,
                              fontFamily: Utils.ubuntuRegularFont),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                ),

                ///This will create an overflow error
                Row(
                  children: <Widget>[
                    chipDesign(&quotFood&quot, Color(0xFF4fc3f7)),
                    chipDesign(&quotLifestyle&quot, Color(0xFFffb74d)),
                    chipDesign(&quotHealth&quot, Color(0xFFff8a65)),
                    chipDesign(&quotSports&quot, Color(0xFF9575cd)),
                    chipDesign(&quotNature&quot, Color(0xFF4db6ac)),
                    chipDesign(&quotFashion&quot, Color(0xFFf06292)),
                    chipDesign(&quotHeritage&quot, Color(0xFFa1887f)),
                    chipDesign(&quotCity Life&quot, Color(0xFF90a4ae)),
                    chipDesign(&quotEntertainment&quot, Color(0xFFba68c8)),
                  ],
                ),
              ],
            ),

            divider(context),

            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(bottom: 16),
                  child: Column(
                    children: <Widget>[
                      Text(
                        'With Wrap widget',
                        style: TextStyle(
                            color: Colors.black87,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                            fontFamily: Utils.ubuntuRegularFont),
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 12, right: 12, top: 8),
                        child: Text(
                          'Here we observe that chips are contained inside a Wrap '
                              'widget.\nIt adjusts all the children according to the space'
                              ' available\nand automatically wraps to the next line',
                          style: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 14.0,
                              fontStyle: FontStyle.italic,
                              fontFamily: Utils.ubuntuRegularFont),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                ),

                ///This will handle itself to get rid of the overflow error
                Wrap(
                  spacing: 0.0, // gap between adjacent chips
                  runSpacing: 0.0, // gap between lines
                  children: <Widget>[
                    chipDesign(&quotFood&quot, Color(0xFF4fc3f7)),
                    chipDesign(&quotLifestyle&quot, Color(0xFFffb74d)),
                    chipDesign(&quotHealth&quot, Color(0xFFff8a65)),
                    chipDesign(&quotSports&quot, Color(0xFF9575cd)),
                    chipDesign(&quotNature&quot, Color(0xFF4db6ac)),
                    chipDesign(&quotFashion&quot, Color(0xFFf06292)),
                    chipDesign(&quotHeritage&quot, Color(0xFFa1887f)),
                    chipDesign(&quotCity Life&quot, Color(0xFF90a4ae)),
                    chipDesign(&quotEntertainment&quot, Color(0xFFba68c8)),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}


///Common method to design a chip with different properties
///like label and background color
Widget chipDesign(String label, Color color) => Container(
      child: Chip(
        label: Text(
          label,
          style: TextStyle(
              color: Colors.white, fontFamily: Utils.ubuntuRegularFont),
        ),
        backgroundColor: color,
        elevation: 4,
        shadowColor: Colors.grey[50],
        padding: EdgeInsets.all(4),
      ),
      margin: EdgeInsets.only(left: 12, right: 12, top: 2, bottom: 2),
    );

///Method to create a divider with added margin
Container divider(BuildContext context) => Container(
  child: Divider(),
  margin: EdgeInsets.only(left: 10, right: 10, top: 28, bottom: 28),
);

و خروجی ان

در کد بالا ویژگی Spacing ان فاصله از اطراف را برای ویجت های ان در نظر میگیرد

و ویژگی runSpacing اندازه فاصله بالا به پایین را تنظیم می کند

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

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

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

نوشته شده توسط پژمان حاجی حیدری یک دوستدار برنامه نویسی