آموزش رایگان فلاتر مقدماتی – فاصله گذاری و تراز کردن ویجت ها در فلاتر

اهمیت فاصله‌گذاری و تراز کردن ویجت‌ها

فاصله‌گذاری و تراز کردن ویجت‌ها در فلاتر نقش بسیار مهمی در ایجاد رابط کاربری زیبا و کاربرپسند دارد. این دو مفهوم به شما کمک می‌کنند تا اجزای مختلف رابط کاربری را به‌طور منظم و هماهنگ قرار دهید و تجربه کاربری بهتری برای کاربران خود فراهم کنید.

 

 

فاصله‌گذاری (Padding و Margin)

دو مفهوم اصلی در فاصله‌گذاری ویجت‌ها در فلاتر، Padding و Margin هستند. هر دو این مفاهیم به شما امکان می‌دهند تا فاصله‌ای را بین ویجت‌ها و اجزای دیگر رابط کاربری ایجاد کنید، اما تفاوت‌هایی بین آن‌ها وجود دارد.

 

Padding

Padding فاصله‌ای است که در داخل یک ویجت قرار می‌گیرد و فضای داخلی ویجت را از محتوا جدا می‌کند.

مثال:

 

 

Margin

Margin فاصله‌ای است که در خارج از یک ویجت قرار می‌گیرد و فضای خارجی ویجت را از دیگر ویجت‌ها جدا می‌کند. برای ایجاد Margin می‌توانید از ویجت Container استفاده کنید.

 

تراز کردن ویجت‌ها

در فلاتر، برای تراز کردن ویجت‌ها می‌توانید از ویجت‌هایی مانند Row، Column، Center، Align و Container استفاده کنید. هر یک از این ویجت‌ها ویژگی‌های خاص خود را دارند و به شما امکان می‌دهند تا ویجت‌ها را به صورت افقی یا عمودی تراز کنید.

 

تراز کردن افقی با Row

ویجت Row به شما امکان می‌دهد تا ویجت‌ها را به صورت افقی تراز کنید. این ویجت دارای دو ویژگی اصلی mainAxisAlignment و crossAxisAlignment است.

 

تراز کردن عمودی با Column

ویجت Column به شما امکان می‌دهد تا ویجت‌ها را به صورت عمودی تراز کنید. این ویجت نیز دارای دو ویژگی اصلی mainAxisAlignment و crossAxisAlignment است.

مثال:

 

 

تراز کردن مرکزی با Center

ویجت Center به شما امکان می‌دهد تا ویجت‌ها را به صورت مرکزی در صفحه تراز کنید. این ویجت به‌طور خودکار فرزندان خود را در مرکز صفحه قرار می‌دهد.

مثال:

 

 

تراز کردن دقیق با Align

ویجت Align به شما امکان می‌دهد تا ویجت‌ها را به صورت دقیق در نقاط مختلف صفحه تراز کنید. این ویجت دارای ویژگی alignment است که به شما امکان می‌دهد موقعیت دقیق ویجت را مشخص کنید.

مثال:

 

ترکیب فاصله‌گذاری و تراز کردن

در بسیاری از موارد، شما نیاز دارید تا فاصله‌گذاری و تراز کردن ویجت‌ها را به صورت همزمان انجام دهید. برای این کار می‌توانید از ترکیب ویجت‌های مختلف استفاده کنید.

مثال:

 

 

در این مثال، ویجت Container دارای Padding و Margin است و در مرکز صفحه تراز شده است.

استفاده از Spacer برای فاصله‌گذاری

ویجت Spacer به شما امکان می‌دهد تا فضای خالی بین ویجت‌ها ایجاد کنید. این ویجت معمولاً در Row و Column استفاده می‌شود تا فاصله‌های انعطاف‌پذیری بین ویجت‌ها ایجاد شود.

مثال:

 

 

نتیجه‌گیری

فاصله‌گذاری و تراز کردن ویجت‌ها در فلاتر از اهمیت بالایی برخوردار است و به شما کمک می‌کند تا رابط کاربری زیبا و کاربرپسندی ایجاد کنید. با استفاده از ویجت‌هایی مانند Padding، Container، Row، Column، Center و Align می‌توانید ویجت‌های خود را به صورت دقیق و منظم تراز کنید و فاصله‌های مناسبی بین آن‌ها ایجاد کنید.

برای یادگیری بیشتر درباره فاصله‌گذاری و تراز کردن ویجت‌ها و سایر مفاهیم فلاتر، پیشنهاد می‌کنیم در دوره‌های آموزشی فلاتر از سایت‌های معتبری مانند Programming Show شرکت کنید. این دوره‌ها به شما کمک می‌کنند تا به یک توسعه‌دهنده حرفه‌ای فلاتر تبدیل شوید و از امکانات بی‌نظیر این چارچوب بهره‌مند شوید.