cloudsolutions-atoms/lib/new_views/common_widgets/app_floating_action_button.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/pages/new_gas_refill_request_page.dart';
import 'package:test_sa/new_views/pages/new_service_request_page.dart';
import 'package:test_sa/new_views/pages/new_transfer_request_page.dart';

import '../../models/enums/translation_keys.dart';
import '../app_style/app_color.dart';

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

  @override
  State<AppFloatingActionButton> createState() => _AppFloatingActionButtonState();
}

class _AppFloatingActionButtonState extends State<AppFloatingActionButton> {
  double turns = 0.0;

  void _rotate() {
    setState(() {
      if (turns == 0) {
        turns += 1.0 / 8.0;
      } else {
        turns = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    const duration = Duration(milliseconds: 500);
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: [
        Visibility(
          visible: turns != 0,
          maintainAnimation: true,
          maintainState: true,
          child: AnimatedOpacity(
            opacity: turns != 0 ? 1 : 0,
            duration: duration,
            child: Card(
              shape: Theme.of(context).cardTheme.copyWith().shape,
              margin: EdgeInsetsDirectional.only(start: 60.toScreenWidth),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  _FloatingButtonListTile(iconName: "gas_refill_request", label: context.translation.gasRefillRequest, routeName: NewGasRefillRequestPage.routeName),
                  const Divider().defaultStyle(context).paddingOnly(left: 16, right: 16),
                  _FloatingButtonListTile(iconName: "transfer_request", label: context.translation.transferRequest, routeName: NewTransferRequestPage.routeName),
                  const Divider().defaultStyle(context).paddingOnly(left: 16, right: 16),
                  _FloatingButtonListTile(iconName: "service_request", label: context.translation.serviceRequest, routeName: NewServiceRequestPage.routeName),
                ],
              ).paddingOnly(top: 8, bottom: 8),
            ),
          ),
        ),
        16.height,
        FloatingActionButton(
          child: AnimatedRotation(
            turns: turns,
            duration: duration,
            child: const Icon(Icons.add),
          ),
          onPressed: () {
            _rotate();
          },
        ),
      ],
    );
  }
}

class _FloatingButtonListTile extends StatelessWidget {
  final String iconName, routeName;
  final String label;

  const _FloatingButtonListTile({
    @required this.iconName,
    @required this.routeName,
    @required this.label,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.of(context).pushNamed(routeName);
      },
      child: ListTile(
        horizontalTitleGap: 40.toScreenWidth,
        leading: SvgPicture.asset(
          "assets/images/$iconName.svg",
          height: 28.toScreenWidth,
          color: context.isDark ? AppColor.primary40 : AppColor.primary70,
        ),
        title: Text(
          label,
          style: Theme.of(context).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w500),
        ),
      ),
    );
  }
}