Flutter Widgets

به دلیل اینکه flutter کلا از widget ها استفاده می کند، ما می توانیم از material برای ساخت برنامه هایمان استفاده کنیم و هم چنین می توان از widget های متنوعی برای ساخت استفاده کنیم.

MaterialApp: برای اینکه بتوانیم از ویجت های material استفاده کنیم، برای بجای container خود فلاتر از این متد استفاده کنیم.

debugShowCheckedModeBanner: یک بولین می باشد ک میتوان توسط آن بنری ک در گوشه سمت راست می باشد را حذف کنیم

home: توسط این بخش می توان بخش اصلی صفحه را مشخص کنیم ک همان صفحه اصلی می باشد و برای ساخت ظاهر اولیه و بهتر صفحه از scaffold استفاده میکنیم و میتوانیم بخش های مختلف صفحه را در این متد مشخص کنیم.

appBar: ک می توان متد AppBar را برای آن استفاده کرد و بخش های مختلف قسمت header برنامه را مشخص کنیم مثلا title برای نمایش عنوان، backgroundColor برای زنگ پس زمینه آن بخش، elevation برای تغییر سایه زیر هدر، centerTitle برای مرکز قرار دادن عنوان، leading برای قرار دادن آیکون

     appBar: AppBar(
          backgroundColor: Colors.red,
          // leading: Icon(Icons.access_alarm_outlined),
          title: Text(title),
          elevation: 8,
          centerTitle: true,
     ),

body: در این قسمت تمامی المان های نوشته شده، در بدنه اصلی برنامه ب نمایش در می آیند.

drawer و endDrawer: برای قرار دادن منوی دراوری شکل ک متد Drawer ک یکی سمت راست و دیگری سمت چپ نمایش داده می شود.

    drawer: const SafeArea(
          child: Drawer(
            child: ListTile(
              title: Text(
                "Mohammad Farhadi",
                style: TextStyle(fontSize: 18),
              ),
              subtitle: Text("Front End Developer"),
              leading: Icon(
                Icons.arrow_right,
                color: Colors.redAccent,
                textDirection: TextDirection.rtl,
              ),
            ),
          ),
    ),

floatingActionButton: برای نمایش دکمه گرد سمت راست پایین ک این ویجت، 2 آرگومان اجباری دارد ک اولی onPress یک تابع می باشد و دومی child می باشد ک میتوان مثلا از Icon(Icons.favorite) برای قرار دادن یک آیکون در این متد استفاده کرد. همچنین میتوان از ویجت های دیگر نیز استفاده کنیم، مانند backgroundColor: Colors.red، برای تغییر رنگ پس زمینه این بخش

    floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: () {
            setState(() {
              title = "Mohammad";
            });
          },
          child: Icon(Icons.favorite),
    ),

🎉 همچنین در ویجت های stateful میتوان از setState در قسمت onPress برای تغییر state ها نیز استفاده کنیم.

SafeArea: برای نمایش المان ها داخل صفحه، بدون در نظر گرفتن قسمت بالایی و پایینیه گوشی های هوشمند

ListTile: توسط این متد میتوان یک لیست درست کرد، مثلا در قسمت Drawer میتوان از این متد استفاده کرد و چیز های مختلفی را نمایش داد

Text: توسط این متد می توانیم در هرجایی ک لازم بود، یک قسمت متنی بسازیم.

🎉 اکثر متد ها دارای چند آرگومان ورودی می باشند، مثلا در متد Text دارای آرگومان هایی مانند style و align و غیره می باشد ک میتوان ب وسیله آن ها، روی متن ها کنترل بهتری داشته باشیم.

ElevatedButton: به وسیله این ویجت میتوان یک دکمه را در هر جایی ک خواستیم نمایش دهیم ک 2 آرگومان آن اجباری می باشد ک اولی onPress و دومی child می باشد.

    body: ElevatedButton(
        onPressed: () {},
        child: const Text("click me!"),
    ),

🎉 در نسخه جدید dart بهتر است از debugPrint بجای print استفاده کنیم.

TextButton: مانند ElevatedButton می باشد، فقط background ندارد و فقط یک تکست می باشد (مانند تگ a)

OutlinedButton: دقیقا مانند TextButton می باشد، با این فرق یک border اطراف متن می باشد.

IconButton: مانند TextButton می باشد، با این فرق ک فقط می توان از Icon در آن استفاده کرد.

Container: در واقع مانند تگ div عمل می کند و ب ما بخشی جدا را می دهد ک می توانیم مانند تگ div ب آن استایل بدهیم و آن را شخصی سازی کنیم.

body: Container()

🎉 برای margin و padding دادن ویجت هایی ک این ها را ساپورت می کنند، باید از متد استاتیک EdgeInSets استفاده کرد و سپس ب وسیله متد های آن مانند all و غیره، از آن ها استفاده کرد.

margin: const EdgeInsets.all(10),

🎉 همچنین اگر از decoration استفاده کردیم، باید color را درون BoxDecoration استفاده کنیم (decoration همان دکوراسیون خودمان می باشد.)

    decoration: const BoxDecoration(
        color: Colors.greenAccent,
        borderRadius: BorderRadius.all(Radius.circular(10)),
     ),

Card: همچنین ما میتوانیم از این ویجت داخل Container استفاده کنیم ک ب صورت پیش فرض یک استایل ب ویجت Container می دهد. همچنین این ویجت ب تنهایی قابل استفاده نیست.

    body: Container(
        width: 100,
        height: 100,
        margin: const EdgeInsets.all(10),
        child: const Card(
            elevation: 10,
        ),
    ),

TextField: همان تگ input می باشد و میتوان درون آن چیزی نوشت.

    child: const TextField(
        decoration: InputDecoration(hintText: "Enter Your Name", labelText: "Name", prefixIcon: Icon(Icons.info)),
    ),

Column و Row: ب وسیله این 2 ویجت می توان در یک قسمت از چندین ویجت، همزمان استفاده کنیم و Column در محور عمودی و Row در محور افقی نمایش داده میشود.

    body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: const [
          Text("mamad1"),
          Text("mamad2"),
          Text("mamad3"),
          Text("mamad4"),
        ],
    ),

Switch: همان radio می باشد ک ب شکل switch در گوشی های اپل می باشد.

body: Switch(value: true, onChanged: (value){}),

Checkbox: برای انتخاب چند گزینه مناسب می باشد.

body: Checkbox(value: true, onChanged: (value){}),

Radio: برای انتخاب یک گزینه بین گزینه های دیگر مناسب است.

body: Radio(value: true, groupValue: true, onChanged: (value){}),