ویجت 20 ( Expanded در فلاتر)

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

شاید یک سوال براتون پیش امده که خوب فضا های خالی را چگونه مدیریت کنم؟ نگران نباشید فلاتر برای هر کاری راه حل خودش را داره و اصلا برای همین این ویجت را معرفی کرده

کد زیر را در نظر بگیرید

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                width: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }
}

در کد بالا فضای بین Container را با این ویجت پرمیکنیم یعنی ویجت اول در صفحه قرار داده میشه سپس Container بعدی در پایان صفحه به اندازه ی طول و عرض مورد نظر قرار داده می شود و فضای بین را هم این ویجت پر می کنه خروجی زیر را دقت کنید

خیلی خوب میشد جای خالی ما را هم کسی پر کنه ؟ خوب نیست ؟ اصلا مگه میشه مگه داریم جای شما دوستان و همراهان عزیز را کی میتونه پر کنه !

مثال بعدی در مورد این ویجت

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Row Sample'),
      ),
      body: Center(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.amber,
                height: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 50,
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.amber,
                height: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

به وسیله Flex میتوانیم نسبت اندازه به این ویجت بدهیم مثلا در ویجت بالا بعد از قرار گیری Container از مقدار باقی مانده به نسبت 1 به 2 به ویجت ها می رسد خروجی زیر را دقت کنید

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

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

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

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

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