ویجت 13 (AnimatedPositioned در فلاتر)

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

فلاتر یکی از فوق العاده ترین ها در زمینه ی برنامه نویسی است که از خیلی ویژگی های منحصر به فردش و راحتی اش گذر کنیم برای هر کاری انیمیشن خودش را داره و فلاتر را میشه پدر انیمیشن سازی هم در نرم افزار نام برد و خودتان می دونید چه تاثیری روی کاربر می گذارد در عین سادگی کد نویسی ان

حالا جدا از این صحبت ها میخواهیم خروجی زیر را پیاده سازی کنیم و با این ویجت اشنا شویم

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AnimatedPositioned Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'AnimatedPositioned Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double pos_l = 0;
  double pos_r = 0;
  double pos_t = 0;
  double pos_b = 0;

  void _movewidget(String pos) {
    setState(() {
      if (pos == &quotUp&quot) {
        pos_l = 0;
        pos_r = 0;
        pos_t = 0;
        pos_b = 100;
      } else if (pos == &quotRight&quot) {
        pos_l = 100;
        pos_r = 0;
        pos_t = 0;
        pos_b = 0;
      } else if (pos == &quotDown&quot) {
        pos_l = 0;
        pos_r = 0;
        pos_t = 100;
        pos_b = 0;
      } else if (pos == &quotLeft&quot) {
        pos_l = 0;
        pos_r = 100;
        pos_t = 0;
        pos_b = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
        child: Stack(
          children: <Widget>[
            AnimatedPositioned(
              left: pos_l,
              right: pos_r,
              top: pos_t,
              bottom: pos_b,
              duration: Duration(milliseconds: 500),
              child: Center(
                child: Container(
                  color: Colors.red,
                  width: 100.0,
                  height: 100.0,
                ),
              ),
            ),
            Positioned(
              bottom: 100,
              left: 160,
              child: RaisedButton(
                onPressed: () {
                  _movewidget(&quotUp&quot);
                },
                child: Icon(Icons.keyboard_arrow_up),
              ),
            ),
            Positioned(
              bottom: 60,
              left: 260,
              child: RaisedButton(
                onPressed: () {
                  _movewidget(&quotRight&quot);
                },
                child: Icon(Icons.keyboard_arrow_right),
              ),
            ),
            Positioned(
              bottom: 10,
              left: 160,
              child: RaisedButton(
                onPressed: () {
                  _movewidget(&quotDown&quot);
                },
                child: Icon(Icons.keyboard_arrow_down),
              ),
            ),
            Positioned(
              bottom: 60,
              left: 60,
              child: RaisedButton(
                onPressed: () {
                  _movewidget(&quotLeft&quot);
                },
                child: Icon(Icons.keyboard_arrow_left),
              ),
            )
          ],
        ),
      )),
    );
  }
}

در این ویجت با استفاده از موقعیت دهی با left و right و top و bottom و استفاده از Setstate برای تغییر وضعیت ان ها از این انیمیشن استفاده کرد با duration هم زمان انیمیشن موردنظر را تنظیم می کنیم

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

اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?

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

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