اضافة Side Navigation Bar لمواقع الويب باستخدام فلاتر

اضافة Side Navigation Bar لمواقع الويب باستخدام فلاتر

في هذا المقال نشرح لكم كيف تقوم بانشاء Side Navigation Bar داخل برامج ومواقع فلاتر حيث ان هذا التاثير يعمل على جميع المنصات بدون اي مشاكل لانها مصصمم لذلك وعباره عن اكواد مكتوبة ولن نحتاج الى اي مكتبات خارجية لتنفيذ هذا العمل والامر بسيط كل العناصر نقدمها لكم في هذا المقال حتى تكون قادر من التعامل معه بدون ادنى مشاكل تماما في تطبيقك ونحن نسعى دائما لتوفير لكم كل ما تحتاجونه من شروحات واكواد برمجية لتحسين لتطبيقك وبرامجك بشكل كبير في Flutter .

How to add Side Navigation Bar fot website

هذه الاكواد المسؤوله عن تنفيذ العمل وهيا عباره عمل animation بسيط يمكنك القيام به ويختلف عن الضغط لعمل التاثير ولدينا المتغيرات في list والنصوص وغيرها يمكنك عمل الشكل والتصميم او حتى تركهم وتغيير عناصر ال list كما ترغب كما هو موضح بالاكواد التاليه .

Side.dart

List<bool> isSelected = [true, false, false, false, false];
List<String> navElements = [
  'NavElement()',
  'NavElement()1',
  'NavElement()2',
  'NavElement()3',
  'NavElement()4',
];
List<String> texts = [
  'Dashboard',
  'E-mail',
  'Calendar',
  'Explore',
  'Search',
];
List<IconData> icons = [
  Icons.dashboard,
  Icons.mail,
  Icons.calendar_today,
  Icons.explore,
  Icons.search,
];


class MyMobileBody extends StatefulWidget {
  const MyMobileBody({Key? key}) : super(key: key);

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> {

  void select(int n) {
    for (int i = 0; i < 5; i++) {
      if (i == n) {
        isSelected[i] = true;
      } else {
        isSelected[i] = false;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: const Color(0xFFDFE3EC),
        child: Container(
          height: MediaQuery
              .of(context)
              .size
              .height,
          width: 200.0,
          decoration: const BoxDecoration(
            color: Colors.white,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: navElements
                .map(
                  (e) =>
                  NavElement(
                    index: navElements.indexOf(e),
                    text: texts[navElements.indexOf(e)],
                    icon: icons[navElements.indexOf(e)],
                    active: isSelected[navElements.indexOf(e)],
                    onTap: () {
                      setState(() {
                        select(navElements.indexOf(e));
                      });
                    },
                  ),
            )
                .toList(),
          ),
        ),
      ),
    );
  }
}

class NavElement extends StatefulWidget {
  final bool active;
  final Function onTap;
  final IconData icon;
  final String text;
  final int index;

  NavElement(
      {required this.onTap,
        required this.active,
        required this.icon,
        required this.text,
        required this.index});

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

Color conColor = Colors.white;

class _NavElementState extends State<NavElement> with TickerProviderStateMixin {
  late AnimationController _tcc;
  late Animation<Color?> _tca;
  late AnimationController _icc;
  late Animation<Color?> _ica;
  late AnimationController _lsc;
  late Animation<double> _lsa;
  double width = 140.0;
  double opacity = 0.0;

  @override
  void initState() {
    print('hello');
    super.initState();
    _tcc = AnimationController(
        duration: Duration(milliseconds: 375),
        reverseDuration: Duration(milliseconds: 300),
        vsync: this);
    _tca = ColorTween(begin: Colors.black45, end: Colors.black).animate(
        CurvedAnimation(
            parent: _tcc, curve: Curves.easeOut, reverseCurve: Curves.easeIn));

    _tcc.addListener(() {
      setState(() {});
    });

    _icc = AnimationController(
        duration: Duration(milliseconds: 375),
        reverseDuration: Duration(milliseconds: 300),
        vsync: this);
    _ica = ColorTween(begin: Colors.black, end: Colors.white).animate(
        CurvedAnimation(
            parent: _icc, curve: Curves.easeOut, reverseCurve: Curves.easeIn));

    _icc.addListener(() {
      setState(() {});
    });

    _lsc = AnimationController(
        duration: Duration(milliseconds: 375),
        reverseDuration: Duration(milliseconds: 300),
        vsync: this);
    _lsa = Tween(begin: 0.0, end: 1.5).animate(CurvedAnimation(
        parent: _lsc, curve: Curves.easeOut, reverseCurve: Curves.easeIn));

    _lsc.addListener(() {
      setState(() {});
    });

    if (widget.active) {
      _icc.forward();
      _tcc.forward();
      _lsc.forward();
    }

    Future.delayed(Duration(milliseconds: 150 * (widget.index + 1)), () {
      setState(() {
        width = 0.0;
        opacity = 1.0;
        print(1000 ~/ (5 - (widget.index)));
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (!widget.active) {
      _icc.reverse();
    }
    return MouseRegion(
      onEnter: (value) {
        _tcc.forward();
        _lsc.forward();
      },
      onExit: (value) {
        _tcc.reverse();
        _lsc.reverse();
      },
      opaque: false,
      child: GestureDetector(
        onTap: () {
          widget.onTap();
          _icc.forward();
          _tcc.forward();
          _lsc.forward();
        },
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(15.0)),
          padding: EdgeInsets.only(left: 15.0, top: 5.0, bottom: 5.0),
          height: 80.0,
          width: 200.0,
          child: Row(
            children: [
              AnimatedContainer(
                curve: Curves.easeOut,
                duration: Duration(milliseconds: 300),
                height: widget.active ? 45.0 : 35.0,
                width: widget.active ? 45.0 : 35.0,
                decoration: BoxDecoration(
                  color: widget.active ? Colors.black : Colors.white,
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: Icon(
                  widget.icon,
                  color: _ica.value,
                ),
              ),
              SizedBox(
                width: 8.0,
              ),
              Stack(
                children: [
                  AnimatedContainer(
                    duration: Duration(milliseconds: 375),
                    height: 60.0,
                    width: 130.0,
                    alignment: Alignment((width == 0.0) ? -0.9 : -1.0,
                        (width == 0.0) ? 0.0 : -0.9),
                    child: AnimatedOpacity(
                      duration: Duration(milliseconds: 375),
                      opacity: opacity,
                      child: Text(
                        widget.text,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: widget.active ? Colors.black : _tca.value,
                          letterSpacing: widget.active ? 2.0 : _lsa.value,
                          fontSize: 16.0,
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    right: 0.0,
                    child: AnimatedContainer(
                      height: 60.0,
                      width: width,
                      color: Colors.white,
                      duration: Duration(milliseconds: 375),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}