impl_nested_appbar (background)

import 'package:base_project/presentation/pages/auth/dummy/kota.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../theme/theme.dart';
import '../../../../widget/base_widget/appbar/ts_appbar.dart';
import '../../../../widget/base_widget/button/ts_button.dart';
import '../../../../widget/base_widget/container/ts_container.dart';
import '../../../../widget/base_widget/dialog/ts_dialog.dart';
import '../../../../widget/base_widget/forms/ts_forms.dart';

class RegistrationEmailPage extends StatefulWidget with InputValidationMixin {
  const RegistrationEmailPage({super.key});

  @override
  State<RegistrationEmailPage> createState() => _RegistrationEmailPageState();
}

class _RegistrationEmailPageState extends State<RegistrationEmailPage>
    with InputValidationMixin {
  int index = 0;

  List<Kota> kota = allKota;
  String? kotaSelected;
  String? kecamatanSelected;
  String? tahunSelected;
  int? selectedYear;
  bool isAgree = false;
  List<String> genderList = ['Male', 'Female'];
  String selectedToggle = '';
  final formKey = GlobalKey<FormState>();

  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  final testingList = List.generate(
    50,
    (index) => Text(
      '197' + index.toString(),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        canvasColor: Colors.transparent,
        colorScheme: const ColorScheme.light(primary: redColor),
      ),
      child: TSNestedAppbar(
        titleAppbar: const TSText(
          text: 'Daftar Akun',
          color: Colors.white,
          fontSize: 16,
        ),
        containerAppbar: const TSUpperAuthContainer(),
        content: buildStepper(context),
        height: Get.height * .25,
        nestedType: NestedType.background,
      ),
    );
  }
}

mixin InputValidationMixin {
  bool isEmailValid(String email) {
    RegExp regex = RegExp(
        r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+");
    return regex.hasMatch(email);
  }

  bool isSurenameValid(String surename) {
    RegExp regex = RegExp("[a-zA-Z]");
    return regex.hasMatch(surename);
  }
}

impl_nested_appbar (column)

\class _ProfileViewState extends State<ProfileView> {
  @override
  Widget build(BuildContext context) {
    return TSNestedAppbar(
      content: buildContent(),
      titleAppbar: buildTitleAppbar(),
      height: Get.height * .4,
      nestedType: NestedType.column,
      titleAppbarShrink: buildTitleAppbarShrink(),
      imgUrl: 'assets/images/background-full.png',
    );
  }

  Widget buildTitleAppbarShrink() {
    return Row(
      children: [
        const TsDefaultAvatar(
          imgUrl: 'assets/vector/default.png',
          width: 30,
          height: 30,
        ),
        const SizedBox(
          width: 10,
        ),
        TSText(
          text: 'Michael Utomo',
          fontSize: 24,
          color: Colors.white,
          fontWeight: semiBold,
        ),
      ],
    );
  }

  Widget buildTitleAppbar() {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.only(left: 30),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const TsDefaultAvatar(
                  width: 80,
                  height: 80,
                  imgUrl: 'assets/vector/default.png',
                ),
                const SizedBox(height: 40),
                TSText(
                  text: 'Michael Utomo',
                  fontSize: 24,
                  fontWeight: semiBold,
                  color: Colors.white,
                ),
                const TSText(
                  text: 'm.untono@gmail.com',
                  color: whiteBoneColor,
                  fontSize: 10,
                ),
                const TSText(
                  text: '081221890783',
                  color: whiteBoneColor,
                  fontSize: 10,
                ),
              ],
            ),
          ),
          const SizedBox(height: 10),
          TSProfileBadge(
            expiredDate: '8 Jun 2023',
            userPoint: '200.000.000',
            width: Get.width * .85,
          ),
        ],
      ),
    );
  }

  Widget buildContent() {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(50),
        ),
      ),
      child: TSMasterButton(
        buttonType: ButtonType.filled,
        text: 'testing',
        onPressed: () => showModalBottomSheet(
          isScrollControlled: true,
          backgroundColor: Colors.transparent,
          context: context,
          builder: (BuildContext context) => TSBottomDialog(
            masterModal: MasterModal.notification,
            title: 'Perkenalan diri (Survey Wajib)',
            height: Get.height * .5,
            backText: 'Ya, Batalkan',
            backProcess: () => Navigator.pop(context),
            nextText: 'Tidak, Lanjutkan Perubahan',
            nextProcess: () => Navigator.pop(context),
            lottieLibrary: const TSLottieWarning(),
          ),
        ),
      ),
    );
  }
}

impl_nested_appbar (row)

class RewardView extends GetView<RewardController> {
  const RewardView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return TSNestedAppbar(
      titleAppbar: buildTitleAppbar(context),
      content: buildContent(context),
      containerAppbar: buildContainerAppbar(context),
      height: Get.height * .25,
      nestedType: NestedType.row,
      // isMargin: false,
      imgUrl: 'assets/images/background-50.png',
    );
  }
}

NestedAppbar

part of 'ts_appbar.dart';

class TSNestedAppbar extends StatefulWidget {
  final Widget titleAppbar;
  final Widget? containerAppbar;
  final double height;
  final Widget content;
  final Widget? leadingAppbar;
  final List<Widget>? actionsAppbar;
  final Color backgroundColor;
  final String imgUrl;
  final bool isMargin;
  final Widget? titleAppbarShrink;
  final NestedType nestedType;

  const TSNestedAppbar({
    super.key,
    required this.content,
    required this.titleAppbar,
    this.containerAppbar,
    required this.height,
    this.leadingAppbar,
    this.actionsAppbar,
    this.backgroundColor = blueColor,
    this.imgUrl = '',
    this.isMargin = true,
    this.titleAppbarShrink,
    required this.nestedType,
  });

  @override
  State<TSNestedAppbar> createState() => _TSNestedAppbarState();
}

class _TSNestedAppbarState extends State<TSNestedAppbar> {
  ScrollController? scrollController;
  bool lastStatus = true;

  void scrollListener() {
    if (isShrink != lastStatus) {
      setState(() {
        lastStatus = isShrink;
      });
    }
  }

  bool get isShrink {
    return scrollController != null &&
        scrollController!.hasClients &&
        scrollController!.offset > (widget.height - kToolbarHeight);
  }

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController()..addListener(scrollListener);
  }

  @override
  void dispose() {
    scrollController?.removeListener(scrollListener);
    scrollController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: getBackgroundColor(),
      body: Container(
        decoration: getBackground(),
        child: SafeArea(
          maintainBottomViewPadding: true,
          child: NestedScrollView(
            controller: scrollController,
            floatHeaderSlivers: true,
            headerSliverBuilder: (context, innerBoxIsScrolled) => [
              SliverAppBar(
                centerTitle: false,
                automaticallyImplyLeading: false,
                elevation: 0,
                expandedHeight: widget.height,
                flexibleSpace: getNestedType(),
                leading: isShrink ? widget.leadingAppbar : null,
                actions: isShrink ? widget.actionsAppbar : null,
                title: getShrinkTitle(),
                pinned: true,
              ),
            ],
            body: widget.content,
          ),
        ),
      ),
    );
  }

  Color getBackgroundColor() {
    if (widget.nestedType == NestedType.background) {
      return widget.backgroundColor;
    }
    return whiteColor;
  }

  Widget? getShrinkTitle() {
    if (widget.nestedType == NestedType.column) {
      return isShrink ? widget.titleAppbarShrink : null;
    }
    if (widget.nestedType == NestedType.row) {
      return isShrink ? widget.titleAppbar : null;
    }
    if (widget.nestedType == NestedType.background) {
      return isShrink ? widget.titleAppbar : null;
    }
    return const SizedBox.shrink();
  }

  Decoration getBackground() {
    if (widget.nestedType == NestedType.background) {
      return BoxDecoration(
        color: widget.backgroundColor,
      );
    }
    if (widget.nestedType == NestedType.column) {
      return BoxDecoration(
        gradient: gradientTestingSecondary,
      );
    }
    if (widget.nestedType == NestedType.row) {
      return BoxDecoration(
        gradient: gradientTestingPrimary,
      );
    }
    return const BoxDecoration(color: Colors.transparent);
  }

  Widget getNestedType() {
    if (widget.nestedType == NestedType.background) {
      return FlexibleSpaceBar(
        title: isShrink ? null : widget.titleAppbar,
        background: widget.containerAppbar,
      );
    }
    if (widget.nestedType == NestedType.column) {
      return Stack(
        children: [
          Positioned.fill(
            child: Image.asset(
              widget.imgUrl,
              fit: BoxFit.cover,
            ),
          ),
          FlexibleSpaceBar(
            centerTitle: false,
            background:
                isShrink ? widget.titleAppbarShrink : widget.titleAppbar,
          ),
        ],
      );
    }
    if (widget.nestedType == NestedType.row) {
      return Stack(
        children: [
          Positioned.fill(
            child: Image.asset(
              widget.imgUrl,
              fit: BoxFit.cover,
            ),
          ),
          FlexibleSpaceBar(
            centerTitle: false,
            background: isShrink
                ? widget.titleAppbar
                : Container(
                    margin: widget.isMargin
                        ? const EdgeInsets.only(top: 20, left: 20, right: 20)
                        : null,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        widget.titleAppbar,
                        widget.containerAppbar!,
                      ],
                    ),
                  ),
          ),
        ],
      );
    }
    return const SizedBox.shrink();
  }
}

enum NestedType { background, row, column }