huixiang_app/lib/main_page.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/home/huixiang_brand_page.dart';
import 'package:huixiang/home/main_home_page.dart';
import 'package:huixiang/mine/mine_page.dart';
import 'package:huixiang/union/union_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPage();
  }
}

class _MainPage extends State<MainPage> {
  List<Widget> _widgetOptions;
  List<String> texts = [
    S.current.pinpai,
    S.current.main_menu1,
    S.current.main_menu2,
    S.current.main_menu3,
  ];
  List<String> icons;
  List<String> iconn;

  @override
  void initState() {
    super.initState();
    _widgetOptions = <Widget>[
      BrandPage(),
      MainHomePage(),
      UnionPage(),
      MinePage(),
    ];

    icons = [
      "assets/image/icon_brand_s.png",
      "assets/image/icon_bi_s.png",
      "assets/image/icon_meng_s.png",
      "assets/image/icon_wo_s.png",
    ];
    iconn = [
      "assets/image/icon_brand_n.png",
      "assets/image/icon_bi_n.png",
      "assets/image/icon_meng_n.png",
      "assets/image/icon_wo_n.png",
    ];
  }

  PageController pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: PageView(
          controller: pageController,
          children: _widgetOptions,
          physics: NeverScrollableScrollPhysics(),
          onPageChanged: (index) {
            clickIndex = index;
            setState(() {});
          },
        ),
        margin: EdgeInsets.only(bottom: 76),
      ),
      extendBody: true,
      bottomNavigationBar: Container(
        alignment: Platform.isAndroid ? Alignment.center : Alignment.topCenter,
        decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 2),
                blurRadius: 4,
                spreadRadius: 0,
              )
            ],
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(4), topLeft: Radius.circular(4))),
        height: 82.h,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            bottomNavigationBigItem(0),
            bottomNavigationItem(1),
            bottomNavigationItem(2),
            bottomNavigationItem(3),
          ],
        ),
      ),
    );
  }

  var clickIndex = 0;

  Widget bottomNavigationItem(index) {
    var isSelected = index == clickIndex;
    return Expanded(
      child: InkWell(
        onTap: () {
          setState(() {
            clickIndex = index;
            pageController.jumpToPage(clickIndex);
          });
        },
        child: Container(
          width: 45.w,
          child: Column(
            mainAxisAlignment: Platform.isAndroid
                ? MainAxisAlignment.center
                : MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              if(Platform.isIOS)
                SizedBox(
                  height: 4.h,
                ),
              AnimatedCrossFade(
                firstChild: Image.asset(
                  icons[index],
                  width: 30,
                  height: 30,
                  fit: BoxFit.contain,
                ),
                secondChild: Image.asset(
                  iconn[index],
                  width: 30,
                  height: 30,
                  fit: BoxFit.contain,
                ),
                crossFadeState: isSelected
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                duration: Duration(milliseconds: 200),
              ),
              Text(
                texts[index],
                style: TextStyle(
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF4C4C4C)),
              ),
            ],
          ),
        ),
      ),
      flex: 1,
    );
  }

  Widget bottomNavigationBigItem(index) {
    var isSelected = index == clickIndex;
    return Expanded(
      child: InkWell(
        onTap: () {
          setState(() {
            clickIndex = index;
            pageController.jumpToPage(clickIndex);
          });
        },
        child: Container(
          width: 45.w,
          alignment: Alignment.center,
          child: AnimatedCrossFade(
            firstCurve: Curves.easeIn,
            secondCurve: Curves.ease,
            sizeCurve: Curves.easeInOut,
            firstChild: Container(
              padding: EdgeInsets.all(4),
              height: 82.h,
              alignment:
                  Platform.isAndroid ? Alignment.center : Alignment.topCenter,
              child: Image.asset(
                icons[index],
                width: 45,
                height: 45,
                fit: BoxFit.contain,
              ),
            ),
            secondChild: Column(
              mainAxisAlignment: Platform.isAndroid
                  ? MainAxisAlignment.center
                  : MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                if(Platform.isIOS)
                  SizedBox(
                    height: 4.h,
                  ),
                Image.asset(
                  iconn[index],
                  width: 30,
                  height: 30,
                  fit: BoxFit.contain,
                ),
                SizedBox(
                  height: 1.h,
                ),
                Text(
                  texts[index],
                  style: TextStyle(
                    fontSize: 10.sp,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF4C4C4C),
                  ),
                ),
              ],
            ),
            crossFadeState: isSelected
                ? CrossFadeState.showFirst
                : CrossFadeState.showSecond,
            duration: Duration(milliseconds: 200),
          ),
        ),
      ),
      flex: 1,
    );
  }
}