💄 Stylish alphabet bar

Cavitedev · Jun 14, 2021 · e2c8875 · e2c8875
1 parent 8cf44fd
commit e2c8875
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 26 deletions.
diff --git a/lib/presentation/contacts/list_view/widgets/contact_list_scaffold.dart b/lib/presentation/contacts/list_view/widgets/contact_list_scaffold.dart
@@ -52,8 +52,8 @@ class _ContactsListScaffoldState extends State<ContactsListScaffold> {
                 key: ObjectKey(widget.stateValues.displayedContacts().length),
                 itemHeight: ContactRow.height(context),
                 list: widget.stateValues.displayedContacts().toContacts(),
-                unselectedTextStyle: TextStyle(color: Colors.pink, fontSize: 16 / MediaQuery.textScaleFactorOf(context)),
-                selectedTextStyle: TextStyle(color: Colors.green, fontSize: 16 / MediaQuery.textScaleFactorOf(context)),
+                unselectedTextStyle: TextStyle(color: Theme.of(context).disabledColor, fontSize: 16 / MediaQuery.textScaleFactorOf(context)),
+                selectedTextStyle: TextStyle(color: Theme.of(context).accentIconTheme.color, fontSize: 16 / MediaQuery.textScaleFactorOf(context)),
                 itemBuilder: (context, i) {
                   final SelectionContact contact =
                       widget.stateValues.displayedContacts()[i];

diff --git a/lib/presentation/core/widgets/alphabet_scroll_view/alphabet_scroll_view.dart b/lib/presentation/core/widgets/alphabet_scroll_view/alphabet_scroll_view.dart
@@ -1,7 +1,9 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
+import 'package:scorecontacts/core/app_constants.dart';
 import 'package:scorecontacts/presentation/core/widgets/alphabet_scroll_view/alphabet_scroll_view_data.dart';
+import 'package:scorecontacts/presentation/core/widgets/form/text_field_container.dart';
 
 enum LetterAlignment { left, right }
 
@@ -96,8 +98,7 @@ class _AlphabetScrollViewState extends State<AlphabetScrollView> {
 
   void onListDrag(double vPosition) {
     final int itemIndex = max(vPosition ~/ widget.itemHeight, 0);
-    int index =
-        _filteredAlphabets.indexOf(_elementsString[itemIndex]);
+    int index = _filteredAlphabets.indexOf(_elementsString[itemIndex]);
     if (index == -1) {
       index = _filteredAlphabets.length - 1;
     }
@@ -130,28 +131,35 @@ class _AlphabetScrollViewState extends State<AlphabetScrollView> {
                 child: ValueListenableBuilder<int>(
                     valueListenable: _selectedIndexNotifier,
                     builder: (context, int selected, Widget? child) {
-                      return Column(
-                          mainAxisAlignment: MainAxisAlignment.center,
-                          children: List.generate(
-                            _filteredAlphabets.length,
-                            (i) => Container(
-                              margin: const EdgeInsets.symmetric(horizontal: 12),
-                              child: GestureDetector(
-                                key: i == selected ? _letterKey : null,
-                                onTap: () {
-                                  _selectedIndexNotifier.value = i;
-                                  scrollToIndex(i);
-                                },
-                                child: Text(
-                                  _filteredAlphabets[i]
-                                      .toUpperCase(),
-                                  style: selected == i
-                                      ? widget.selectedTextStyle
-                                      : widget.unselectedTextStyle,
+                      return TextFieldContainer(
+                        margin: const EdgeInsets.symmetric(
+                            horizontal: Constants.smallPadding),
+                        padding: const EdgeInsets.symmetric(
+                          vertical: Constants.smallPadding,
+                          horizontal: 2,
+                        ),
+                        child: Column(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: List.generate(
+                              _filteredAlphabets.length,
+                              (i) => Container(
+                                margin: const EdgeInsets.symmetric(horizontal: 12),
+                                child: GestureDetector(
+                                  key: i == selected ? _letterKey : null,
+                                  onTap: () {
+                                    _selectedIndexNotifier.value = i;
+                                    scrollToIndex(i);
+                                  },
+                                  child: Text(
+                                    _filteredAlphabets[i].toUpperCase(),
+                                    style: selected == i
+                                        ? widget.selectedTextStyle
+                                        : widget.unselectedTextStyle,
+                                  ),
                                 ),
                               ),
-                            ),
-                          ));
+                            )),
+                      );
                     }),
               ),
             ),

diff --git a/lib/presentation/core/widgets/form/text_field_container.dart b/lib/presentation/core/widgets/form/text_field_container.dart
@@ -2,16 +2,20 @@ import 'package:flutter/material.dart';
 
 class TextFieldContainer extends StatelessWidget {
   final Widget child;
+  final EdgeInsets margin;
+  final EdgeInsets padding;
   const TextFieldContainer({
     Key? key,
     required this.child,
+    this.margin = const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
+    this.padding = const EdgeInsets.symmetric(horizontal: 16)
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Container(
-        margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
-        padding: const EdgeInsets.symmetric(horizontal: 16),
+        margin: margin,
+        padding: padding,
         decoration: BoxDecoration(
           color: Theme.of(context).inputDecorationTheme.fillColor,
           borderRadius: BorderRadius.circular(36),