چیدمان در فلاتر (Flutter)

در آموزش فلاتر، یکی از مفاهیم کلیدی، ویجت است. در فلاتر، همه چیز به شکل ویجت در نظر گرفته می‌شود؛ این شامل تصاویر، متون، و حتی المان‌های طراحی مانند ردیف‌ها، ستون‌ها، و شبکه‌ها می‌شود که در رابط کاربری مستقیماً دیده نمی‌شوند اما برای سازمان‌دهی ویجت‌ها استفاده می‌شوند.

فلاتر شما را قادر می‌سازد که با ترکیب چندین ویجت، چیدمان‌های مرتب و دقیق ایجاد کنید. این توانایی به شما امکان می‌دهد تا اپلیکیشن‌هایی با طراحی پیچیده و متنوع بسازید.

در تصویر دوم طرح تصویر بالا را می بینیم. این تصویر یک ردیف از سه ستون را نشان می دهد و این ستون ها حاوی یک آیکون و برچسب هستند.

کانتینر در Flutter یک ویجت است که امکان شخصی‌سازی ویجت‌های درونی را فراهم می‌کند. از کانتینر برای اضافه کردن ویژگی‌هایی نظیر حاشیه (margin)، فاصله داخلی (padding)، رنگ پس‌زمینه و موارد دیگر استفاده می‌شود. به عنوان مثال، می‌توانید یک ویجت متنی را داخل کانتینر قرار دهید تا حاشیه اضافه کنید. همچنین، امکان افزودن حاشیه و فاصله داخلی به یک ردیف کامل نیز وجود دارد. رنگ و سبک متن نیز می‌تواند توسط کانتینر کنترل شود

چگونه یک ویجت ساده بسازیم و نمایش دهیم:

بیایید یاد بگیریم که چگونه می توانیم یک ویجت ساده ایجاد کرده و نمایش دهیم. مراحل زیر نحوه چیدمان یک ویجت را نشان می دهد:

• گام اول : انتخاب یک ویجت طرح‌بندی. برای مثال، می‌توانید از ویجت‌هایی مانند Column, Row, یا Container استفاده کنید که به شما اجازه می‌دهند عناصر دیگر را در داخل خود قرار دهید..
• گام دوم : یک ویجت قابل مشاهده ایجاد کنید. این می‌تواند ویجتی مانند Text, Image, یا Icon باشد..
• گام سوم : ویجت قابل مشاهده را به ویجت طرح‌بندی اضافه کنید. مثلاً اگر Container را انتخاب کرده‌اید، می‌توانید ویجت Text را به عنوان فرزند در آن قرار دهید..
• گام چهارم : در نهایت، ویجت طرح‌بندی را به صفحه اصلی برنامه اضافه کنید تا بتوانید آن را مشاهده کنید. این کار معمولاً با استفاده از ویجت Scaffold و تنظیم ویجت طرح‌بندی به عنوان بدنه (body) آن انجام می‌شود..

انواع چیدمان ویجت‌ها در فلاتر

فلاتر دو نوع اصلی چیدمان ویجت را ارائه می‌دهد:

1. ویجت‌های تک فرزند (Single Child Widget):
2. ویجت‌های چند فرزند (Multiple Child Widget):

ویجت‌های تک فرزند (Single Child Widget):

این ویجت‌ها تنها یک ویجت فرزند را در خود جای می‌دهند. می‌توانند ویژگی‌های چیدمان خاصی داشته باشند که به ما کمک می‌کند تا رابط کاربری را زیبا و کارآمد طراحی کنیم. استفاده از این ویجت‌ها می‌تواند کد را خواناتر و مدیریت آن را آسان‌تر کند. مثال معروف این دسته از ویجت‌ها، Container است که امکاناتی مانند تنظیم رنگ، موقعیت، و اندازه را فراهم می‌کند.

    Center(  
  child: Container(  
    margin: const EdgeInsets.all(15.0),  
    color: Colors.blue,  
    width: 42.0,  
    height: 42.0,  
  ),  
)

Padding: ویجتی که به ویجت فرزند خود فاصله دور تا دور (padding) می‌دهد.

    const Greetings(  
  child: Padding(  
    padding: EdgeInsets.all(14.0),  
    child: Text('Hello JavaTpoint!'),  
  ),  
)  

Center: این ویجت به شما این امکان را می دهد که ویجت فرزند را در خود مرکز قرار دهید. Align: این یک ویجت است که ویجت فرزند خود را در داخل خود تراز می کند و آن را بر اساس اندازه فرزند، اندازه می دهد. همچنین کنترل بیشتری برای قرار دادن ویجت فرزند در موقعیتی که به آن نیاز دارید، فراهم می کند.

    Center(  
  child: Container(  
    height: 110.0,  
    width: 110.0,  
    color: Colors.blue,  
    child: Align(  
      alignment: Alignment.topLeft,  
      child: FlutterLogo(  
        size: 50,  
      ),  
    ),  
  ),  
)

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

SizedBox(  
    width: 300.0,  
    height: 450.0,  
    child: const Card(child: Text('Hello JavaTpoint!')),  
  )
    
  

AspectRatio: این ویجت به شما این امکان را می دهد که اندازه ویجت فرزند را در یک نسبت تصویر مشخص نگه دارید

AspectRatio(  
    aspectRatio: 5/3,  
    child: Container(  
      color: Colors.bluel,  
    ),  
  ),  
  

BaseLine: این ویجت ویجت فرزند را مطابق خط پایه (baseline) فرزند جابجا می کند.

    child: Baseline(  
        baseline: 30.0,  
        baselineType: TextBaseline.alphabetic,  
        child: Container(  
             height: 60,  
             width: 50,  
             color: Colors.blue,  
        ),  
)  

  

ConstrainedBox: ویجتی است که به شما امکان می دهد محدودیت های اضافی را روی ویجت فرزند خود اعمال کنید. این بدان معنی است که شما می توانید ویجت فرزند را مجبور به داشتن یک محدودیت خاص بدون تغییر ویژگی های ویجت فرزند کنید.

    ConstrainedBox(  
        constraints: new BoxConstraints(  
          minHeight: 150.0,  
          minWidth: 150.0,  
          maxHeight: 300.0,  
          maxWidth: 300.0,  
        ),  
        child: new DecoratedBox(  
          decoration: new BoxDecoration(color: Colors.red),  
        ),  
      ), 
      
  

CustomSingleChildLayout: این یک ویجت است که از طرح Single Child به یک نماینده موکول می شود. نماینده تصمیم می گیرد ویجت فرزند را در موقعیت مکانی قرار دهد و همچنین برای تعیین اندازه ویجت والد استفاده می شود.

FittedBox: ویجت فرزند را با توجه به تناسب مشخص شده مقیاس و موقعیت می دهد.

    import 'package:flutter/material.dart';  
  
    void main() => runApp(MyApp());  
      
    class MyApp extends StatelessWidget {  
      // It is the root widget of your application.  
      @override  
      Widget build(BuildContext context) {  
        return MaterialApp(  
          title: 'Multiple Layout Widget',  
          debugShowCheckedModeBanner: false,  
          theme: ThemeData(  
            // This is the theme of your application.  
            primarySwatch: Colors.green,  
          ),  
          home: MyHomePage(),  
        );  
      }  
    }  
    class MyHomePage extends StatelessWidget {  
      
      @override  
      Widget build(BuildContext context) {  
        return Scaffold(  
            appBar: AppBar(title: Text("FittedBox Widget")),  
            body: Center(  
            child: FittedBox(child: Row(  
              children: [  
                Container(  
                  child: Image.asset('assets/computer.png'),  
                  ),  
                  Container(  
                    child: Text("This is a widget"),  
                  )  
                ],  
              ),  
              fit: BoxFit.contain,  
            )  
          ),  
        );  
      }  
    }  
    

  

خروجی

FractionallySizedBox: این ویجتی است که امکان اندازه گیری ویجت فرزند خود را با توجه به کسری از فضای موجود فراهم می کند.

IntrinsicHeight and IntrinsicWidth: این ویجتی است که امکان اندازه گیری ویجت فرزند خود را با توجه به کسری از فضای موجود فراهم می کند.

LimitedBox: این ویجت به ما اجازه می دهد تا اندازه آن را فقط زمانی محدود کنیم که محدود نباشد.

Offstage: برای اندازه گیری ابعاد یک ویجت بدون نمایش آن بر روی صفحه استفاده می شود.

OverflowBox: این یک ویجت است که به ویجت فرزند خود اجازه می دهد تا محدودیت های متفاوتی نسبت به والدین اعمال کند. به عبارت دیگر، به فرزند اجازه می دهد ویجت والد را سرریز کند.

مثال:

        import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  // It is the root widget of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Single Layout Widget',  
      debugShowCheckedModeBanner: false,  
      theme: ThemeData(  
        // This is the theme of your application.  
        primarySwatch: Colors.blue,  
      ),  
      home: MyHomePage(),  
    );  
  }  
}  
class MyHomePage extends StatelessWidget {  
    
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("OverflowBox Widget"),  
      ),  
      body: Center(  
      child: Container(  
        height: 50.0,  
        width: 50.0,  
        color: Colors.red,  
        child: OverflowBox(  
          minHeight: 70.0,  
          minWidth: 70.0,  
          child: Container(  
            height: 50.0,  
            width: 50.0,  
            color: Colors.blue,  
            ),  
          ),  
        ),  
      ),  
    );  
  }  
}  

      

خروجی:

ویجت های Multiple Child

ویجت های Multiple Child نوعی ویجت هستند که بیش از یک ویجت فرزند را شامل می شود و چیدمان این ویجت ها منحصر به فرد است. برای مثال، ویجت ردیفی که از ویجت فرزند خود در جهت افقی قرار می گیرد و ویجت ستونی که ویجت فرزند خود را در جهت عمودی قرار می دهد. اگر ویجت Row و Column را با هم ترکیب کنیم، آنگاه می تواند هر سطحی از ویجت پیچیده را بسازد

در اینجا، ما قصد داریم انواع مختلف ویجت های Multiple Child را یاد بگیریم:

Row: اجازه می دهد تا ویجت های فرزند خود را در جهت افقی مرتب کنید

مثال:

        import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  // It is the root widget of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Multiple Layout Widget',  
      debugShowCheckedModeBanner: false,  
      theme: ThemeData(  
        // This is the theme of your application.  
        primarySwatch: Colors.blue,  
      ),  
      home: MyHomePage(),  
    );  
  }  
}  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: Container(  
        alignment: Alignment.center,  
        color: Colors.white,  
        child: Row(  
          children: [  
            Expanded(  
              child: Text('Peter', textAlign: TextAlign.center),  
            ),  
            Expanded(  
              child: Text('John', textAlign: TextAlign.center ),  
  
            ),  
            Expanded(  
              child: FittedBox(  
                fit: BoxFit.contain, // otherwise the logo will be tiny  
                child: const FlutterLogo(),  
              ),  
            ),  
          ],  
        ),  
      ),  
    );  
  }  
}  

      

خروجی:

Column: این اجازه می دهد تا ویجت های فرزند خود را در جهت عمودی مرتب کنید.

ListView: این محبوب ترین ویجت اسکرول است که به ما امکان می دهد ویجت های فرزند خود را یکی پس از دیگری در جهت پیمایش مرتب کنیم.

GridView: این به ما امکان می‌دهد ویجت‌های فرزند خود را به‌عنوان یک آرایه دوبعدی و قابل پیمایش از ویجت‌ها مرتب کنیم. این شامل یک الگوی مکرر از سلول ها است که در یک طرح افقی و عمودی قرار گرفته اند.

Expanded: این اجازه می دهد تا فرزندان یک ویجت ردیف و ستون را برای اشغال حداکثر منطقه ممکن بسازید.

Table: این ویجتی است که به ما امکان می دهد فرزندان خود را در یک ویجت مبتنی بر جدول مرتب کنیم.

Flow: این به ما امکان می دهد ویجت مبتنی بر جریان را پیاده سازی کنیم.

Stack: این یک ویجت ضروری است که عمدتاً برای همپوشانی چندین ویجت فرزند استفاده می شود. این به شما امکان می دهد چندین لایه را روی صفحه قرار دهید. مثال زیر به درک آن کمک می کند:

        import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  // It is the root widget of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Multiple Layout Widget',  
      debugShowCheckedModeBanner: false,  
      theme: ThemeData(  
        // This is the theme of your application.  
        primarySwatch: Colors.blue,  
      ),  
      home: MyHomePage(),  
    );  
  }  
}  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: Container(  
        alignment: Alignment.center,  
        color: Colors.white,  
        child: Stack(  
          children: [  
            // Max Size  
            Container(  
              color: Colors.blue,  
            ),  
            Container(  
              color: Colors.pink,  
              height: 400.0,  
              width: 300.0,  
            ),  
            Container(  
              color: Colors.yellow,  
              height: 220.0,  
              width: 200.0,  
            )  
          ],  
        ),  
      ),  
    );  
  }  
}  

      

خروجی :

ساخت قالب پیچیده

در این بخش، ما می خواهیم یاد بگیریم که چگونه می توانید یک رابط کاربری پیچیده با استفاده از ویجت های طرح بندی single Child و multiple child ایجاد کنید. چارچوب طرح‌بندی به شما اجازه می‌دهد با قرار دادن ردیف‌ها و ستون‌ها در داخل سطرها و ستون‌ها، یک طرح‌بندی رابط کاربری پیچیده ایجاد کنید.

اجازه دهید نمونه ای از یک رابط کاربری پیچیده را با ایجاد لیست محصول (Product List) مشاهده کنیم. برای این منظور ابتدا باید کد فایل main.dart را با قطعه کد زیر جایگزین کنید:

        import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  // It is the root widget of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Flutter Demo Application', theme: ThemeData(  
      primarySwatch: Colors.green,),  
      home: MyHomePage(title: 'Complex layout example'),  
    );  
  }  
}  
class MyHomePage extends StatelessWidget {  
  MyHomePage({Key key, this.title}) : super(key: key);  
  final String title;  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
        appBar: AppBar(title: Text("Product List")),  
        body: ListView(  
          padding: const EdgeInsets.fromLTRB(3.0, 12.0, 3.0, 12.0),  
          children: [  
            ProductBox(  
                name: "iPhone",  
                description: "iPhone is the top branded phone ever",  
                price: 55000,  
                image: "iphone.png"  
            ),  
            ProductBox(  
                name: "Android",  
                description: "Android is a very stylish phone",  
                price: 10000,  
                image: "android.png"  
            ),  
            ProductBox(  
                name: "Tablet",  
                description: "Tablet is a popular device for official meetings",  
                price: 25000,  
                image: "tablet.png"  
            ),  
            ProductBox(  
                name: "Laptop",  
                description: "Laptop is most famous electronic device",  
                price: 35000,  
                image: "laptop.png"  
            ),  
            ProductBox(  
                name: "Desktop",  
                description: "Desktop is most popular for regular use",  
                price: 10000,  
                image: "computer.png"  
            ),  
          ],  
        )  
    );  
  }  
}  
class ProductBox extends StatelessWidget {  
  ProductBox({Key key, this.name, this.description, this.price, this.image}) :  
        super(key: key);  
  final String name;  
  final String description;  
  final int price;  
  final String image;  
  
  Widget build(BuildContext context) {  
    return Container(  
        padding: EdgeInsets.all(2),  
        height: 110,  
        child: Card(  
            child: Row(  
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
                children: [  
                  Image.asset("assets/" + image),  
                  Expanded(  
                      child: Container(  
                          padding: EdgeInsets.all(5),  
                          child: Column(  
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
                            children: [  
                              Text(  
                                  this.name, style: TextStyle(  
                                  fontWeight: FontWeight.bold  
                              )  
                              ),  
                              Text(this.description), Text(  
                                  "Price: " + this.price.toString()  
                              ),  
                            ],  
                          )  
                      )  
                  )  
                ]  
            )  
        )  
    );  
  }  
} 

      

در کد بالا، ویجت ProductBox را ایجاد می کنیم که حاوی جزئیات محصول مانند تصویر، نام، قیمت و توضیحات است. در ویجت ProductBox از ویجت های فرزند زیر استفاده می کنیم: Container، Row، Column، Expanded، Card، Text، Image و غیره. این ویجت دارای طرح بندی زیر است:

خروجی:

حالا وقتی فایل دارت را در شبیه ساز اندروید اجرا می کنیم، خروجی زیر را می دهد:

It is the nested container.
It is the parent container gesture.