flutter-sport/lib/pages/my/achievement_page.dart

import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:sport/bean/achievement_info.dart';
import 'package:sport/bean/user.dart';
import 'package:sport/provider/achievement_info_model.dart';
import 'package:sport/widgets/appbar.dart';
import 'package:sport/widgets/box.dart';
import 'package:sport/widgets/error.dart';
import 'package:sport/widgets/misc.dart';
import 'package:sport/widgets/space.dart';

class AchievementPage extends StatefulWidget {
  final AchievementInfoData data;

  AchievementPage(this.data);

  @override
  State<StatefulWidget> createState() => _PageState();
}

class _PageState extends State<AchievementPage> {
  AchievementInfoModel _achievementInfoModel = new AchievementInfoModel(1);
  late ScrollController _controller;
  double _expandedHeight = 0;
  int _brightness = 0;

  @override
  void initState() {
    super.initState();
    initData();
    _controller = ScrollController()
      ..addListener(() {
//        print(
//            "[_controller.position.pixels] -------------------------- ${_controller.position.pixels}");
        print("[_brightness]--------------------------$_brightness");
        if (_controller.position.pixels >= 70) {
          if (_brightness == 0) {
            setState(() {
              _brightness = 1;
            });
          }
        } else {
          if (_brightness == 1) {
            setState(() {
              _brightness = 0;
            });
          }
        }
      });
  }

  initData() async {
    await _achievementInfoModel.getAchievementInfo();
  }

  initScrollController() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      alignment: Alignment.topCenter,
      children: <Widget>[
        Container(
          color: Color(0xff241D19),
          height: double.infinity,
        ),
        Positioned(
          top: 10,
          left: 0,
          right: 0,
          child: Image.asset(
            'lib/assets/img/myachievements_bg.png',
            fit: BoxFit.fitWidth,
          ),
        ),
        CustomScrollView(controller: _controller, slivers: <Widget>[
          buildSliverAppBar(
            context,
            "我的成就",
            backgroundColor: _brightness == 0 ? Color(0x00000000) : Color(0xffffffff),
            brightness: _brightness == 0 ? 1 : 0,
            textStyle: _brightness == 0
                ? TextStyle(fontWeight: FontWeight.w600, fontSize: 18.0, color: Color(0xffffffff))
                : TextStyle(fontWeight: FontWeight.w600, fontSize: 18.0, color: Color(0xff333333)),
            whiteBackButton: _brightness == 0 ? true : false,
            canBack: _brightness == 0 ? false : true,
          ),
          SliverToBoxAdapter(
              child: Padding(
            padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 13.0),
            child: Column(
              children: <Widget>[
                Row(crossAxisAlignment: CrossAxisAlignment.end, children: <Widget>[
                  RichText(
                    text: TextSpan(
                      text: '累计获得',
                      style: Theme.of(context).textTheme.bodyText2!.copyWith(color: Color(0xffffffff)),
                      children: <TextSpan>[
                        TextSpan(
                            text: "${widget.data.getAchievementCount}",
                            style: Theme.of(context).textTheme.bodyText2!.copyWith(color: Theme.of(context).accentColor, fontSize: 28.0)),
                        TextSpan(text: '枚勋章', style: Theme.of(context).textTheme.bodyText2!.copyWith(color: Color(0xffffffff)))
                      ],
                    ),
                  )
                ]),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 10.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      alignment: Alignment.centerLeft,
                      child: CustomPaint(
                        painter: _ProgressBar(
//                                1.0
//                             widget.data.exp / (widget.data.nextLevelExp + widget.data.exp),
                            (widget.data.getAchievementPercent??0.0) / 100.0,
                            Color(0xffdcdcdc)),
                        child: Container(
                          height: 12,
                          width: 140,
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  child: Text("收集进度 ${widget.data.getAchievementPercent}%",
                      style: Theme.of(context).textTheme.bodyText1!.copyWith(fontSize: 11.0, color: Color(0xffffffff))),
                ),
                Space(
                  height: 16.0,
                )
              ],
            ),
          )),
          SliverToBoxAdapter(
            child: BoxWidget(
              paddingAll: false,
              body: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 16.0, bottom: 8.0),
                    child:
                      Stack(
                        alignment: Alignment.center,
                        children: <Widget>[
                          Image.asset(
                            "lib/assets/img/mine_image_achievement.png",
                            fit: BoxFit.fitWidth,
                            width: 240,
                          ),
                          Text(
                            "已获得成就",
                            style: Theme.of(context).textTheme.bodyText1!,
                          ),
                        ],
                      )
                  ),
                  if ((widget.data.getAchievementList?.length ?? 0) == 0)
                    Padding(
                        padding: const EdgeInsets.all(24.0),
                        child: Column(
                          children: <Widget>[
                            Image.asset("lib/assets/img/${RequestErrorWidget.ASSETS_NO_RANK}"),
                            Padding(
                              padding: const EdgeInsets.fromLTRB(0, 12, 0, 12),
                              child: Text(
                                "还未获得任何成就",
                                style: Theme.of(context).textTheme.bodyText2!,
                              ),
                            ),
                          ],
                        )),
                  if (widget.data.getAchievementList?.isNotEmpty == true)
                    Padding(
                      padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
                      child: AlignedGridView.count(
                        padding: EdgeInsets.zero,
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        crossAxisCount: 3,
                        itemCount: widget.data.getAchievementList!.length,
                        itemBuilder: (BuildContext context, int index) =>
                            achievementWidget(context, widget.data.getAchievementList![index], isRadius: false, w: 84, showCount: true),
                        mainAxisSpacing: 20.0,
                        crossAxisSpacing: 12.0,
                      ),
                    ),
//                  if (widget.data.getAchievementList.length > 0)
//                    Center(
//                      child: Row(
//                        mainAxisSize: MainAxisSize.min,
//                        children: <Widget>[
//                          Image.asset("lib/assets/img/icon_problem.png"),
//                          SizedBox(
//                            width: 2,
//                          ),
//                          Text(
//                            "默认排序按最近获得顺序",
//                            style: Theme.of(context)
//                                .textTheme
//                                .bodyText1
//                                .copyWith(color: Color(0xffcecece)),
//                          ),
//                        ],
//                      ),
//                    ),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: BoxWidget(
              body: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child:
                    Stack(
                      alignment: Alignment.center,
                      children: <Widget>[
                        Image.asset(
                          "lib/assets/img/mine_image_achievement.png",
                          fit: BoxFit.fitWidth,
                          width: 240,
                        ),
                        Text(
                          "未获得成就",
                          style: Theme.of(context).textTheme.bodyText1!,
                        ),
                      ],
                    ),
                  ),
                  getList(widget.data)
                ],
              ),
            ),
          )
        ])
      ],
    ));
  }
}

ListView getList(data) {
  return ListView.builder(
    padding: EdgeInsets.zero,
    physics: NeverScrollableScrollPhysics(),
    itemCount: data?.remainAchievementList?.length ?? 0,
    shrinkWrap: true,
    itemBuilder: (BuildContext context, int index) {
      Achievement item = data.remainAchievementList[index];
      return Padding(
        padding: EdgeInsets.symmetric(vertical: 15.0),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                ColorFiltered(
                  colorFilter: ColorFilter.mode(Colors.white, BlendMode.color),
                  child: CachedNetworkImage(width: 70.0, height: 70.0, imageUrl: item.logo ?? ""),
                ),
                Space(
                  width: 12,
                ),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Text("成就名称：", style: Theme.of(context).textTheme.subtitle1!),
                          Text("${item.name}", style: Theme.of(context).textTheme.bodyText2!.copyWith(color: Theme.of(context).accentColor))
                        ],
                      ),
                      Space(
                        height: 5,
                      ),
                      // Row(
                      //   children: <Widget>[
                      //     Text("成就奖励：", style: Theme.of(context).textTheme.subtitle1!),
                      //     Text("经验值+${item.rewardExp},积分+${item.rewardScore}", style: Theme.of(context).textTheme.bodyText2!)
                      //   ],
                      // ),
                      Space(
                        height: 5,
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("成就条件：", style: Theme.of(context).textTheme.subtitle1!),
                          Expanded(child: Text("${item.conditionDetail}", style: Theme.of(context).textTheme.bodyText2!)),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Space(
              height: 8,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text(
                  '${item.conditionProgress}',
                  style: Theme.of(context).textTheme.subtitle1!.copyWith(color: Theme.of(context).accentColor, fontSize: 12),
                ),
                Text(
                  '/${item.conditionCount}',
                  style: Theme.of(context).textTheme.bodyText1!,
                )
              ],
            ),
            Space(
              height: 2,
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: Container(
                child: CustomPaint(
                  painter: _ProgressBar(item.conditionProgress / (item.conditionCount), Color(0xfff1f1f1)),
                  child: Container(
                    height: 8,
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    },
  );
}

class _ProgressBar extends CustomPainter {
  final Color bg;
  late Paint _paint;
  final Paint _indicatorPaint = Paint()
    ..color = Color(0xffFFC400)
    ..isAntiAlias = true;

  double _paddingBar = 2;

  double percent;

  _ProgressBar(this.percent, this.bg) {
    _paint = Paint()
      ..color = bg
      ..isAntiAlias = true;
  }

  @override
  void paint(Canvas canvas, Size size) {
    double indicator = size.width * min(100.0, this.percent);

    var rect = Rect.fromLTRB(0, size.height - 13, size.width, size.height);

    canvas.drawRRect(RRect.fromRectAndRadius(rect, Radius.circular(size.height / 2)), _paint);

    Paint _valuePaint = Paint()
      ..shader = LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: <Color>[Color(0xffFFE600), Color(0xffFF9100)],
      ).createShader(rect);
    canvas.drawRect(Rect.fromLTRB(0, size.height - 13, indicator, size.height), _valuePaint);

    //
    // Path path = Path()
    //   ..moveTo(indicator, size.height - 13 - _paddingBar)
    //   ..lineTo(indicator - 5, 0)
    //   ..lineTo(indicator + 5, 0)
    //   ..close();
    // canvas.drawPath(path, _indicatorPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}