Description:

smart autocomplete

Smart Autocomplete #
Smart Autocomplete is a Flutter package designed to provide intelligent autocomplete functionality to text input fields in your Flutter applications. With Smart Autocomplete, users can enjoy a seamless typing experience as the widget suggests and completes text based on provided suggestions.

Demo #
Visit here for demo
Features #

Customizable: Smart Autocomplete offers various customization options to tailor the autocomplete behavior and appearance according to your application's needs.
Async Support: Fetch suggestions asynchronously from a data source, ensuring smooth performance even with large datasets.
Error Handling: Handle errors gracefully with customizable error messages or widgets.
Loading Indicators: Display loading indicators while fetching suggestions asynchronously to provide feedback to users.
Rich Suggestions: Render suggestions in a customizable widget, enabling rich UI experiences for users.

Then, run flutter pub get to install the package.
Usage #
import 'package:flutter/material.dart';
import 'package:smart_autocomplete/smart_autocomplete.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Smart AutoComplete Demo',
darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.greenAccent, brightness: Brightness.dark),
useMaterial3: true,
),
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.greenAccent, brightness: Brightness.light),
useMaterial3: true,
),
home: const MyHomePage(title: 'Smart Auto Complete'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
final TextEditingController controller = TextEditingController();

Future<List<String>> getSuggestions(String key) async {
await Future.delayed(const Duration(milliseconds: 500));
return chromeHistory.where((e) => e.toLowerCase().startsWith(key)).toList();
}

Future<String?> getAutoCompletion(String text) async {
if (text.isEmpty) {
return null;
}
await Future.delayed(const Duration(milliseconds: 500));
var input = text.toLowerCase();
var sortedOptions = chromeHistory
.where((option) => option.toLowerCase().startsWith(input))
.toList();
sortedOptions.sort((a, b) => a.length.compareTo(b.length));

if (sortedOptions.isNotEmpty) {
var completion = sortedOptions.first;
return completion;
} else {
return null;
}
}

bool showSuggestions =
true; // Add a flag to control whether to show suggestions

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8.00),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10.0), // Adjust the value as needed
color: Theme.of(context)
.colorScheme
.onInverseSurface, // Adjust color as needed
),
child: SmartAutoCompleteWidget<String>(
controller: controller,
loadingWidgetBuilder: () => showSuggestions
? const SizedBox(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(),
],
))
: const SizedBox.shrink(),
suggestionsBuilder: (context, data) {
if (!showSuggestions || data.isEmpty) {
return const SizedBox.shrink();
} else {
return LimitedBox(
maxHeight: 300,
child: ListView.builder(
shrinkWrap: true,
itemCount: data.length,
itemBuilder: (context, index) {
final item = data[index];
return ListTile(
title: Text(item),
onTap: () {
controller.text = item;
setState(() {
showSuggestions = false;
});
},
);
},
),
);
}
},
getSuggestions: getSuggestions,
onChanged: (f) {
setState(() {
showSuggestions = true;
});
},
getAutocompletion: getAutoCompletion),
)
],
),
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}

List<String> chromeHistory = [
"Where is the Tower of Giza?",
"What are the steps to bake chocolate chip cookies?",
"How do you create a website? Can you provide a tutorial?",
];

copied to clipboard
Documentation #
Autocomplete #

Suggestions #



loadingWidgetBuilder: Widget Function()
A builder function used to construct a widget to display while data for suggestions is being fetched asynchronously. If not provided, a default circular progress indicator is displayed.
Example:
loadingWidgetBuilder: () {
return Center(
child: CircularProgressIndicator(),
);
},
copied to clipboard


errorBuilder: Widget Function(BuildContext context, Object error)
A builder function used to construct a widget to display when an error occurs while fetching data for suggestions. If not provided, a default error message is displayed.
Example:
errorBuilder: (context, error) {
return Text('An error occurred: $error');
},
copied to clipboard


suggestionsBuilder: Widget Function(BuildContext context, List<T> data)
A builder function used to construct widgets based on the list of suggestions obtained from the getSuggestions callback.
Example:
suggestionsBuilder: (context, suggestions) {
return ListView.builder(
itemCount: suggestions.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(suggestions[index]),
onTap: () {
// Handle selection logic
},
);
},
);
},
copied to clipboard


getSuggestions: GetSuggestionsCallback<T>
A callback function used to fetch suggestions based on a provided keyword or query from the textfield.
Example:
getSuggestions: (String keyword) async {
// Implement logic to fetch suggestions from a data source
return ['apple','apricot','avocado'];
},
copied to clipboard


getAutocompletion: GetAutocompletionCallback<String>
A callback function used to fetch autocompletion for a given input text.
Example:
getAutocompletion: (String inputText)async {
// Suppose User has written inside textfield 'W'
// then you can give recommendation like
return 'What is Ram Mandir?'
},
copied to clipboard

Null is returned when there is no match
String is returned when there is a match






Feature
getAutocompletion
getSuggestions




Usage
Fetch autocompletion for text typed inside the textfield.
Provide options or suggestions based on user input.


Return Type
Future<String?>
Future<List<T>>


Invocation
Invoked as the user types inside the textfield.
Triggered when the suggestionBuilder widget requests data.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter