SettingScreen

 avatar
unknown
dart
19 days ago
24 kB
5
Indexable
import 'package:emendo/core/utils/app_const.dart';
import 'package:emendo/core/widgets/my_style_dropdown_button_form_field.dart';
import 'package:emendo/core/widgets/my_style_switch.dart';
import 'package:emendo/core/widgets/my_style_text_form_field.dart';
import 'package:emendo/features/setting/presentation/screen/about_us_screen.dart';
import 'package:emendo/features/setting/presentation/screen/faqs_screen.dart';
import 'package:emendo/features/setting/presentation/screen/profile_edit.dart';
import 'package:emendo/features/setting/presentation/screen/send_us_message_screen.dart';
import 'package:emendo/features/setting/presentation/screen/upgrade_screen.dart';
import 'package:emendo/features/tasks/data/model/task_model.dart';
import 'package:flutter/material.dart';

class SettingScreen extends StatefulWidget {
  const SettingScreen({super.key});

  @override
  State<SettingScreen> createState() => _SettingScreenState();
}

class _SettingScreenState extends State<SettingScreen> {
  /// Display Boolean
  bool _displayAppearanceOptions = false;
  bool _displaySecurityOptions = false;
  bool _displayNotificationOptions = false;

  ///fake data of user model
  final _name = "Morteza Nazari";
  final _email = "namo352@gmail.com";
  final _verified = false;
  final _avatarAddress = "lib/core/resources/png/default_avatar.png";
  final isPro = true;

  ///fake setting options
  bool usePasscode = false;
  String passcode = "";
  bool isDarkMode = false;
  NotificationType notificationTypeSelected = NotificationType.push;

  String languageSelected = AppConst.languageOptions[0];
  String colorSchemeSelected = AppConst.colorSchemeOptions[0];
  String fontSelected = AppConst.fontSelectOptions[0];
  TextEditingController passCodeController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: AppConst.color0,
        foregroundColor: AppConst.color6,
        title: Text("Profile and settings"),
        centerTitle: true,
        leading: Padding(
          padding: const EdgeInsets.all(8.0),
          child: InkWell(
            borderRadius: BorderRadius.circular(100),
            onTap: () {
              // Navigator.pop(context);
            },
            child: Icon(
              Icons.home_filled,
              color: AppConst.color6,
            ),
          ),
        ),
      ),
      backgroundColor: AppConst.color0,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              children: [
                ///Profile Box
                SectionBox(children: [
                  SizedBox(height: 10),
                  SettingRow(
                      onTap: () {
                        Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) => ProfileEditScreen(),
                          ),
                        );
                      },
                      middleWidget: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          ///User Name
                          Text(
                            _name,
                            style: TextStyle(
                                color: AppConst.color7,
                                fontWeight: FontWeight.bold,
                                fontSize: 18),
                          ),
                          Row(
                            children: [
                              /// email address
                              Text(
                                _email,
                                style: TextStyle(
                                    color: AppConst.color7,
                                    fontWeight: FontWeight.w300,
                                    fontSize: 10),
                              ),

                              ///Active or Not Active
                              Text(
                                !_verified
                                    ? " (Not activated)"
                                    : " (Activated)",
                                style: TextStyle(
                                  color:
                                      !_verified ? Colors.red : AppConst.color4,
                                  fontSize: 12,
                                ),
                              )
                            ],
                          ),
                        ],
                      ),
                      setIcon: CircleAvatar(
                        foregroundImage: AssetImage(_avatarAddress),
                        radius: 16,
                      ),
                      endWidget: EndSettingRowWidget()),

                  ///subscription row
                  SettingRow(
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => UpgradeScreen(),
                        ),
                      );
                    },
                    middleWidget: _textOfPro(),
                    setIcon: SetIcon(icon: Icons.attach_money),
                    endWidget: EndSettingRowWidget(),
                  ),

                  SizedBox(height: 10),
                ]),


                ///quick appearance
                SectionBox(
                  children: <Widget>[
                    // #endregion
                  ],
                ),
                SizedBox(height: 10),

                /// Rollable Settings
                SectionBox(
                  children: [
                    SizedBox(height: 10),

                    ///Appearance row
                    SettingRow(
                      middleWidget: AppSettingTitleText("Appearance"),
                      setIcon: SetIcon(icon: Icons.color_lens),
                      endWidget: EndSettingRowWidget(
                        icon: _displayAppearanceOptions == false
                            ? Icons.chevron_right
                            : Icons.keyboard_arrow_down,
                        onTapArrow: () {
                          setState(() {
                            _displayAppearanceOptions =
                                !_displayAppearanceOptions;
                          });
                        },
                      ),
                    ),

                    AnimatedSwitcher(
                        duration: Duration(milliseconds: 5000),
                        transitionBuilder: (child, animation) {
                          return SizeTransition(
                              sizeFactor: animation, child: child);
                        },
                        child: (_displayAppearanceOptions)
                            ? SectionBox(
                                padding: EdgeInsets.symmetric(horizontal: 10),
                                children: [
                                  SizedBox(height: 10),

                                  ///Dark Mode
                            SettingRow(
                              middleWidget: AppSettingTitleText("Dark Mode"),
                              setIcon: SetIcon(icon: Icons.dark_mode),
                              endWidget: MyStyleSwitch(
                                value: isDarkMode,
                                onChanged: (val) {
                                  setState(() {
                                    isDarkMode = val;
                                  });
                                },
                              ),
                            ),

                                  /// Language Select
                                  SettingRow(
                                    middleWidget:
                                        AppSettingTitleText("Language"),
                                    setIcon: SetIcon(icon: Icons.language),
                                    endWidget: SizedBox(
                                      width: 120,
                                      child: MyStyleDropdownButtonFormField(
                                        isDense: true,
                                        value: languageSelected,
                                        onChanged: (val) {
                                          if (languageSelected != val) {
                                            setState(() {
                                              languageSelected = val!;
                                            });
                                          }
                                        },
                                        items: AppConst.languageOptions,
                                      ),
                                    ),
                                  ),

                                  /// ColorScheme Select
                            SettingRow(
                              middleWidget: AppSettingTitleText("Color Scheme"),
                              setIcon: SetIcon(icon: Icons.format_paint),
                              endWidget: SizedBox(
                                width: 120,
                                child: MyStyleDropdownButtonFormField(
                                  // isDense: false,
                                  value: colorSchemeSelected,
                                  onChanged: (val) {
                                    if (colorSchemeSelected != val) {
                                      setState(() {
                                        colorSchemeSelected = val!;
                                      });
                                    }
                                  },
                                  items: AppConst.colorSchemeOptions,
                                ),
                              ),
                            ),

                                  /// Font Select
                                  SettingRow(
                                    middleWidget:
                                        AppSettingTitleText("Font Select"),
                                    setIcon: SetIcon(icon: Icons.font_download),
                                    endWidget: SizedBox(
                                      width: 140,
                                      child: MyStyleDropdownButtonFormField(
                                        // isDense: false,
                                        value: fontSelected,
                                        onChanged: (val) {
                                          if (fontSelected != val) {
                                            setState(() {
                                              fontSelected = val!;
                                            });
                                          }
                                        },
                                        items: AppConst.fontSelectOptions,
                                      ),
                                    ),
                                  ),

                                  /// Font size
                            SettingRow(
                              middleWidget: AppSettingTitleText("Font Select"),
                              setIcon: SetIcon(icon: Icons.format_size),
                              endWidget: SizedBox(
                                width: 140,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: <Widget>[
                                    InkWell(
                                      borderRadius: BorderRadius.circular(50),
                                      onTap: () {
                                        setState(() {
                                          AppConst.plusFontSize++;
                                        });
                                      },
                                      child: Icon(
                                        Icons.add,
                                        size: 25,
                                      ),
                                    ),
                                    SizedBox(width: 15),
                                    InkWell(
                                      borderRadius: BorderRadius.circular(50),
                                      onTap: () {
                                        setState(() {
                                          AppConst.plusFontSize--;
                                        });
                                      },
                                      child: Icon(
                                        Icons.remove,
                                        size: 25,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),

                                  SizedBox(height: 10),
                                ],
                              )
                            : SizedBox.shrink()),

                    ///Security row
                    SettingRow(
                      middleWidget: AppSettingTitleText("Security"),
                      setIcon: SetIcon(icon: Icons.security),
                      endWidget: EndSettingRowWidget(
                        icon: _displaySecurityOptions == false
                            ? Icons.chevron_right
                            : Icons.keyboard_arrow_down,
                        onTapArrow: () {
                          setState(() {
                            _displaySecurityOptions = !_displaySecurityOptions;
                          });
                        },
                      ),
                    ),
                    if (_displaySecurityOptions)
                      SectionBox(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        children: [
                          SizedBox(height: 10),
                          SettingRow(
                            middleWidget: AppSettingTitleText("Use Passkey"),
                            setIcon: SetIcon(icon: Icons.lock),
                            endWidget: MyStyleSwitch(
                              value: usePasscode,
                              onChanged: (val) {
                                setState(() {
                                  usePasscode = val;
                                });
                              },
                            ),
                          ),
                          if (usePasscode)
                            SettingRow(
                                middleWidget: AppSettingTitleText("Pass Code"),
                                setIcon: SetIcon(icon: Icons.password),
                                endWidget: SizedBox(
                                  width: 100,
                                  child: MyStyleTextFormField(
                                    controller: passCodeController,
                                    obscureText: true,
                                    maxLength: 4,
                                    keyboardType: TextInputType.number,
                                    labelText: "Pass code",
                                  ),
                                ))
                        ],
                      ),

                    ///Notifications row
                    SettingRow(
                      middleWidget: AppSettingTitleText("Notifications"),
                      setIcon: SetIcon(icon: Icons.notifications),
                      endWidget: EndSettingRowWidget(
                        icon: _displayNotificationOptions == false
                            ? Icons.chevron_right
                            : Icons.keyboard_arrow_down,
                        onTapArrow: () {
                          setState(() {
                            _displayNotificationOptions =
                                !_displayNotificationOptions;
                          });
                        },
                      ),
                    ),
                    if (_displayNotificationOptions)
                      SectionBox(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        children: [
                          SettingRow(
                              middleWidget:
                                  AppSettingTitleText("Notification type"),
                              setIcon:
                                  SetIcon(icon: Icons.circle_notifications),
                              endWidget: MyStyleDropdownButtonFormField(
                                  value: notificationTypeSelected,
                                  onChanged: (val) {
                                    setState(() {
                                      notificationTypeSelected = val!;
                                    });
                                  },
                                  items: NotificationType.values))
                        ],
                      ),

                    SizedBox(height: 10)
                  ],
                ),
                SizedBox(height: 10),

                /// about box
                SectionBox(
                  children: [
                    SizedBox(height: 10),

                    ///send us message row
                    SettingRow(
                      onTap: () {
                        Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) => SendUsMessageScreen(),
                          ),
                        );
                      },
                      middleWidget: AppSettingTitleText("Send us a message"),
                      setIcon: SetIcon(icon: Icons.send),
                      endWidget: EndSettingRowWidget(),
                    ),

                    ///About us row
                    SettingRow(
                      onTap: () {
                        Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) => AboutUsScreen(),
                          ),
                        );
                      },
                      middleWidget: AppSettingTitleText("About us"),
                      setIcon: SetIcon(icon: Icons.info),
                      endWidget: EndSettingRowWidget(),
                    ),

                    ///FAQ row
                    SettingRow(
                      onTap: () {
                        Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) => FaqsScreen(),
                          ),
                        );
                      },
                      middleWidget: AppSettingTitleText("FAQs"),
                      setIcon: SetIcon(icon: Icons.question_answer),
                      endWidget: EndSettingRowWidget(),
                    ),
                    SizedBox(height: 10)
                  ],
                ),
                SizedBox(height: 10),
              ],
            ),
          ),
        ),
      ),
    );
  }

  ///text of is pro?
  Row _textOfPro() {
    return Row(
      children: [
        Text(
          "You are using the",
          style: TextStyle(color: AppConst.color5),
        ),
        if (!isPro)
          Text(
            " free",
            style: TextStyle(
              color: Colors.red,
              fontWeight: FontWeight.bold,
            ),
          ),
        if (isPro)
          Text(
            " Pro",
            style: TextStyle(
              color: Colors.green,
              fontWeight: FontWeight.bold,
            ),
          ),
        Text(
          " version.",
          style: TextStyle(color: AppConst.color5),
        ),
      ],
    );
  }
}

///App Setting Title Text
class AppSettingTitleText extends StatelessWidget {
  final String title;

  const AppSettingTitleText(this.title, {super.key});

  @override
  Widget build(BuildContext context) {
    return Text(
      overflow: TextOverflow.clip,
      title,
      style: TextStyle(
        fontSize: 14 + AppConst.plusFontSize,
        fontWeight: FontWeight.bold,
        color: AppConst.color7,
      ),
    );
  }
}

///Go to page
class EndSettingRowWidget extends StatelessWidget {
  final VoidCallback? onTapArrow;
  final IconData? icon;
  final Color? color;

  const EndSettingRowWidget({
    super.key,
    this.onTapArrow,
    this.icon,
    this.color,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      borderRadius: BorderRadius.circular(20),
      hoverColor: AppConst.color5,
      focusColor: AppConst.color5,
      onTap: onTapArrow,
      child: Container(
        width: 30,
        height: 30,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
        child:
            Icon(icon ?? Icons.chevron_right, color: color ?? AppConst.color6),
      ),
    );
  }
}

///SetIcon
class SetIcon extends StatelessWidget {
  final IconData icon;

  const SetIcon({
    super.key,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: AppConst.color7,
        border: Border.all(
          width: 1,
          color: AppConst.color3,
        ),
      ),
      child: Icon(
        icon,
        // size: 25,
        color: AppConst.color2,
      ),
    );
  }
}

///Setting Box
class SectionBox extends StatelessWidget {
  final List<Widget> children;
  final EdgeInsetsGeometry? padding;

  const SectionBox({
    super.key,
    required this.children,
    this.padding,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: padding ?? EdgeInsets.all(0),
      child: Ink(
        decoration: BoxDecoration(
          color: AppConst.color1,
          borderRadius: BorderRadius.circular(20),
          border: Border.all(
            color: AppConst.color3,
          ),
        ),
        child: Column(
          children: children,
        ),
      ),
    );
  }
}

///setting row
class SettingRow extends StatelessWidget {
  final Widget middleWidget;
  final Widget setIcon;
  final Widget endWidget;
  final VoidCallback? onTap;

  const SettingRow({
    super.key,
    required this.middleWidget,
    required this.setIcon,
    required this.endWidget,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      borderRadius: BorderRadius.circular(20),
      autofocus: true,
      canRequestFocus: true,
      hoverColor: AppConst.color5,
      focusColor: AppConst.color5,
      mouseCursor: MouseCursor.uncontrolled,
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.only(top: 10, right: 10, left: 10, bottom: 10),
        child: Row(
          children: <Widget>[
            ///Icon
            setIcon,
            SizedBox(width: 10),

            ///Middle row
            middleWidget,
            Spacer(),

            ///end widget
            endWidget
          ],
        ),
      ),
    );
  }
}
Leave a Comment