Refactor settings page

[SankethBK]

Settings page is getting cluttered with lot of options.

Instead of displaying all options linearly, we can group bunch of related options into an accordion.

For now we can group these options Change password, Change Email and Enable Fingerprint login into Security Settings

Initially Security settings will be shown

On clicking it will expand to show all 3 options

Screenshots are just for reference. Feel free to use accordion package or implement your own widget

[sameer1612]

I can take it, do assign if up for grabs. Thanks!

[SankethBK]

Sure, assigning it to you. Feel free to join our discord server if you need help with anything

[sameer1612]

@SankethBK seems blocked here. Flutter's native expansion panel is broken. Doesn't even work on the official website. https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html

Another option we had was to use Accordion library which has a bug with transparent background. I raised an issue but can't expect a resolution soon. https://github.com/GotJimmy/accordion/issues/55

Only option we have in hand is to use a deep blue color instead of waiting for transparent background support. What you suggest?

[SankethBK]

@sameer1612 how about creating our own accordion widget?

Not sure if AnimatedCrossFade would work here. If not we may have to use AnimatedSize or something. Let me know if this helps

import 'package:flutter/material.dart';

class CustomAccordion extends StatefulWidget {
  final Widget header;
  final List<Widget> children;

  CustomAccordion({required this.header, required this.children});

  @override
  _SmoothAccordionState createState() => _SmoothAccordionState();
}

class _CustomAccordionState extends State<Accordion> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListTile(
          title: widget.header,
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          trailing: _isExpanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),
        ),
        AnimatedCrossFade(
          firstChild: Container(),
          secondChild: Column(
            children: widget.children,
          ),
          crossFadeState: _isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
          duration: Duration(milliseconds: 300), // Adjust the duration as needed
        ),
        Divider(height: 1), // Add a divider to separate accordions
      ],
    );
  }
}

We can use it as

CustomAccordion(header: Text("Security Settings", children: [
    Text("change password), ...
])

[sameer1612]

@SankethBK Luckily landed up with a library that doesn't mess up with glassmorphic design. Looks good!

Here's a PR: https://github.com/SankethBK/diaryvault/pull/48