ویجت 2 (Stack در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی Stackاگر با این ویجت اشنایی ندارید تصویر زیر نشان دهنده کامل این ویجت است که ویجت ها را روی یکدیگر قرار می دهدقبل از شروع کار با ویجت کد نویسی اولیه را برای ایجاد طرح اولیه انجام میدهیمimport &quotpackage:flutter/material.dart&quot import 'package:flutter_widgets/const/_const.dart'; class StackPage extends StatefulWidget { @override _StackState createState() => _StackState(); } class _StackState extends State<StackPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(PageName.STACK), ), body: SingleChildScrollView( ), ), ); } }قبل از رفتن سراغ جزئیات ویجت مان یک دست گرمی باهاش میزنیم تا ببینیم این ویجت چند مرده حلاجه :)Widget _simpleStack() => Container( constraints: BoxConstraints.expand(height: 160), child: Stack( children: <Widget>[ Container( color: RED, ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20), color: BLUE_LIGHT, ), Container( margin: EdgeInsets.symmetric(vertical: 30, horizontal: 60), color: PURPLE, ), Container( margin: EdgeInsets.symmetric(vertical: 50, horizontal: 80), color: TEXT_BLACK_LIGHT, ), ], ), );و خروجی پارامتر های Stack به شکل زیر استStack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.overflow = Overflow.clip, List<Widget> children = const <Widget>[], })پارامتر alignment مربوط به نحوه ی قرار گیری بچه در والد است که به عنوان مثال کد زیر نمایانگر این موضوعهWidget _alignStack() => Container( margin: EdgeInsets.only(top: 10), color: BLUE_DEEP, constraints: BoxConstraints.expand(height: 160), child: Stack( alignment: Alignment.centerRight, children: <Widget>[ Container( height: 100, width: 100, color: Colors.white, ), Container( height: 60, width: 60, color: TEXT_BLACK_LIGHT, ), ], ), );و در نهاین خروجی کد زیر پارامتر textDirection که نحوه قرارگیری نوشته مورد نظرمان (راست به چپ یا برعکس)را برایمان ایجاد میکند به کد زیر و خروجی ان توجه کنیدWidget _textLeftStack() => Container( margin: EdgeInsets.only(top: 10), color: GREEN, padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10), constraints: BoxConstraints.expand(height: 60), child: Stack( textDirection: TextDirection.ltr, children: <Widget>[ Text( &quotFlutter Open drawed from left to rigt&quot, style: TextStyle(color: TEXT_BLACK_LIGHT), ) ], ), ); Widget _textRightStack() => Container( margin: EdgeInsets.only(top: 10), color: PURPLE, padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10), constraints: BoxConstraints.expand(height: 60), child: Stack( textDirection: TextDirection.rtl, children: <Widget>[ Text( &quotFlutter Open drawed from right to left&quot, style: TextStyle(color: TEXT_BLACK_LIGHT), ) ], ), );پارامتر fit نحوه ی قرار گیری متناسب با والد ان است به مثال زیر توجه کنیدWidget _fitStack() => Container( color: PURPLE, margin: EdgeInsets.only(top: 10), constraints: BoxConstraints.expand(height: 220), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( constraints: BoxConstraints.expand(height: 60), color: RED, child: Stack( fit: StackFit.loose, children: <Widget>[ Container( color: BLUE_DEEP, child: Text( &quotStackFit.loose&quot, style: TextStyle(color: TEXT_BLACK_LIGHT, fontSize: 20), ), ) ], ), ), Container( constraints: BoxConstraints.expand(height: 60), color: GREEN, child: Stack( fit: StackFit.expand, children: <Widget>[ Container( child: Text( &quotStackFit.expand&quot, style: TextStyle(color: TEXT_BLACK_LIGHT, fontSize: 20), ), color: BLUE_LIGHT, ) ], ), ), SizedBox(height: 10), Container( constraints: BoxConstraints.expand(height: 60), color: RED_LIGHT, child: Stack( fit: StackFit.passthrough, children: <Widget>[ Container( child: Text( &quotStackFit.passthrough&quot, style: TextStyle(color: TEXT_BLACK_LIGHT, fontSize: 20), ), color: GREEN, ) ], ), ) ], ));پارامتر overflow که بچه ای که بزرگتر از والد است ایا زیر ان قرار بگیره یا روی ان به مثال زیر دقت کنیدWidget _overVisibleStack() => Container( margin: EdgeInsets.only(top: 10), color: BLUE_LIGHT, constraints: BoxConstraints.expand(height: 40), child: Stack( overflow: Overflow.visible, children: <Widget>[ Positioned( top: 15, child: Text( &quotFlutter Open is too long to draw here, it will be visible.\n666666666666666666666666666666666&quot, style: TextStyle(color: TEXT_BLACK_LIGHT), ), ) ], ), ); Widget _overClipStack() => Container( margin: EdgeInsets.only(top: 10), color: BLUE_LIGHT, constraints: BoxConstraints.expand(height: 40), child: Stack( overflow: Overflow.clip, children: <Widget>[ Positioned( top: 15, child: Text( &quotFlutter Open is too long to draw here, it will be cliped.\n666666666666666666666666666666666&quot, style: TextStyle(color: TEXT_BLACK_LIGHT), ), ) ], ), );ویجت Positioned که خیلی در استک استفاده میشه و موقعیت بچه در والد را تنظیم میکنهconst Positioned({ Key key, this.left, this.top, this.right, this.bottom, this.width, this.height, @required Widget child, })Widget _posStack() => Container( margin: EdgeInsets.only(top: 10), color: TEXT_BLACK_LIGHT, constraints: BoxConstraints.expand(height: 100), child: Stack( children: <Widget>[ Positioned( left: 10, top: 10, height: 60, width: 60, child: Container( color: RED, ), ), Positioned( right: 200, top: 30, height: 60, width: 60, child: Container( color: BLUE_DEEP, ), ), Positioned( right: 10, top: 10, height: 60, width: 60, child: Container( color: GREEN, ), ), ], ), );و در نهایت خروجی این کدبه همین سادگی به همین خوشمزگی.اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?ایدی کانال برای دسترسی به تمام اموزش ها @Learnpgلینک کانال https://t.me/joinchat/AAAAAFDR-mppe-ciC6X1Qgایدی تلگرام بنده @pejmanprogrammerروز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)