Skip to content

Feature -> Develop | Task-1081 VaahFlutter Fixed: auto complete appearance #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 8, 2023
Merged

Feature -> Develop | Task-1081 VaahFlutter Fixed: auto complete appearance #19

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 65 additions & 16 deletions lib/vaahextendflutter/widgets/atoms/input_auto_complete.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,12 @@ class InputAutoComplete extends StatefulWidget {
final EdgeInsets padding;
final double borderRadius;
final bool isEnabled;
final bool isBorderEnabled;
final InputSize size;
final double height;
final Color? optionsBackgroundColor;
final bool isShadowEnabled;
final IconData? icon;
final Color? iconBackgroundColor;
final Color? iconColor;
final List<String> hints;
Expand All @@ -25,9 +29,13 @@ class InputAutoComplete extends StatefulWidget {
required this.label,
this.padding = allPadding12,
this.borderRadius = defaultPadding / 2,
this.isBorderEnabled = true,
this.isEnabled = true,
this.size = InputSize.medium,
this.height = 250,
this.optionsBackgroundColor,
this.isShadowEnabled = false,
this.icon,
this.iconBackgroundColor,
this.iconColor,
required this.hints,
Expand All @@ -43,18 +51,23 @@ class InputAutoComplete extends StatefulWidget {

class _InputAutoCompleteState extends State<InputAutoComplete> {
final controller = TextEditingController();
bool _optionsAvailable = false;

@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (ctx, constraints) {
return Autocomplete<String>(
optionsBuilder: (TextEditingValue textEditingValue) {
return widget.hints
List<String> hints = widget.hints
.where(
(String hint) => hint.toLowerCase().contains(textEditingValue.text.toLowerCase()),
)
.toList();
setState(() {
_optionsAvailable = hints.isNotEmpty && textEditingValue.text != hints.first;
});
return hints;
},
displayStringForOption: (String hint) => hint,
onSelected: (String selection) {
Expand All @@ -66,21 +79,47 @@ class _InputAutoCompleteState extends State<InputAutoComplete> {
return Align(
alignment: Alignment.topLeft,
child: Material(
child: SizedBox(
child: Container(
width: constraints.maxWidth,
height: widget.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(widget.borderRadius),
bottomRight: Radius.circular(widget.borderRadius),
),
border: widget.isBorderEnabled
? Border.all(color: AppTheme.colors['black']!.shade300)
: null,
boxShadow: !widget.isShadowEnabled
? null
: const [
BoxShadow(
color: Color(0x44000000),
offset: Offset(0, 1),
blurRadius: 8.0,
spreadRadius: 0.0,
),
],
color: widget.optionsBackgroundColor ?? AppTheme.colors['primary']!.shade50,
),
child: ListView.builder(
padding: const EdgeInsets.all(10.0),
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final String option = options.elementAt(index);
return GestureDetector(
onTap: () {
onSelected(option);
},
child: ListTile(
title: Text(option),
),
return Column(
children: [
GestureDetector(
onTap: () {
setState(() {});
FocusScope.of(context).focusedChild?.unfocus();
onSelected(option);
},
child: ListTile(
title: Text(option),
),
),
],
);
},
),
Expand All @@ -96,14 +135,26 @@ class _InputAutoCompleteState extends State<InputAutoComplete> {
) {
return TextFormField(
onTap: () {
setState(() {});
if (fieldFocusNode.hasFocus) fieldFocusNode.unfocus();
},
decoration: InputDecoration(
contentPadding: widget.padding,
border: border(AppTheme.colors['black']!.shade400),
enabledBorder: border(AppTheme.colors['black']!.shade400),
disabledBorder: border(AppTheme.colors['black']!.shade300),
focusedBorder: border(AppTheme.colors['black']!.shade400),
focusedBorder: !_optionsAvailable
? border(AppTheme.colors['black']!.shade400)
: OutlineInputBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(widget.borderRadius),
topRight: Radius.circular(widget.borderRadius),
),
borderSide: BorderSide(
width: 1,
color: AppTheme.colors['black']!.shade400,
),
),
errorBorder: border(AppTheme.colors['danger']!.shade400),
focusedErrorBorder: border(AppTheme.colors['danger']!.shade400),
errorStyle: TextStyle(color: AppTheme.colors['danger']!.shade400),
Expand All @@ -119,15 +170,17 @@ class _InputAutoCompleteState extends State<InputAutoComplete> {
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(widget.borderRadius),
bottomRight: Radius.circular(widget.borderRadius),
bottomRight: fieldFocusNode.hasFocus && _optionsAvailable
? Radius.zero
: Radius.circular(widget.borderRadius),
),
color: widget.iconBackgroundColor ?? AppTheme.colors['primary'],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FaIcon(
asset(),
widget.icon ?? FontAwesomeIcons.angleDown,
size: getFontSize() * 1.3,
color: widget.iconColor ?? AppTheme.colors['white'],
),
Expand Down Expand Up @@ -177,8 +230,4 @@ class _InputAutoCompleteState extends State<InputAutoComplete> {
return AppTheme.medium;
}
}

IconData asset() {
return FontAwesomeIcons.angleDown;
}
}