ویجت 21 (SafeArea در فلاتر)

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

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

خوشبختانه فلاتر عزیز اونجا حضور داشت و بهش با یک کلمه جواب داد SafeArea

خوب بریم سراغ کدش و کمی باهاش دست و پنجه گرم کنیم :)

class SafeAreaWidget extends StatefulWidget {
  @override
  _SafeAreaWidgetState createState() => _SafeAreaWidgetState();
}

class _SafeAreaWidgetState extends State<SafeAreaWidget> {
  ///Bool value to control the behaviour of SafeArea widget.
  bool _isEnabled = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: _isEnabled,
        bottom: _isEnabled,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
              child: Text(
                &quotThis widget is below safe area. If you remove the SafeArea &quot
                    &quotwidget then this text will be behind the notch.&quot,
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white),
              ),
            ),

            ///Press this button to toggle the value of _isEnabled variable
            RaisedButton(
              textColor: Colors.white,
              color: Colors.indigo,
              onPressed: () => setState(() {
                    _isEnabled == true ? _isEnabled = false : _isEnabled = true;
                  }),
              child: Text(_isEnabled ? &quotDisable SafeArea&quot : &quotEnable SafeArea&quot),
            ),

            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
              child: Text(
                &quotThis widget is above safe area&quot,
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

با استفاده از مقادیر در جهات مختلف میتوانیم مانع هجوم ویجت به انجا شویم در مثال بالا top و bottom که در یک وضعیت True است و اطلاعات زیر نوار ابزار بالا و بالای قسمت پایین گوشی است (خیلی شیک و مجلسی چیده شده ) و در وضعیت False اطلاعات زیر نوار بالای گوشی است و کلا نامرتب می باشد

به وضعیت زیر دقت کنید

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

من از این ویجت یاد گرفتم حتی بی نظمی های کوچک را هم باید بهش دقت و اصلاح کرد چون در حال تبدیل به یک فاجعه هستند پس همین الان دست به کار شو

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

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

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