Description:

word collector

word_collector #
This package adds an easy to use and beautiful word collector widget

Getting started #
Add dependency #
dependencies:
word_collector:
copied to clipboard
Add package import #
import 'package:word_collector/word_collector.dart';
copied to clipboard
Usage #
Step 1 #
Prepare a Map<int, List<String>> with the words:
final words = <int, List<String>>{
0: ['We', 'go', 'jogging', 'every', 'Sunday'],
1: ['They', 'did', 'not', 'go', 'to', 'school', 'last', 'year'],
2: ['George', 'has', 'not', 'finished', 'his', 'work', 'yet'],
3: ['We', 'did', 'not', 'meet', 'anyone', 'yesterday'],
};
copied to clipboard
Step 2 #
Create a WordCollectorController():
final wordCController = WordCollectorController();
copied to clipboard
Step 3 #
Create a PageView:
PageView.builder(
...,
itemBuilder: (context, i) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
WordCollector(
controller: wordCController,
pageIndex: i,
words: words[i]!,
bottomPanelWidth: width,
topPanelWidth: width,
wordCollectorStyle: WordCollectorStyle(),
),
],...
copied to clipboard
Result:

Stylization #
After creating WordCollector() we can assign styles via WordCollectorStyle():
WordCollector(
...,
wordCollectorStyle: WordCollectorStyle(
itemBorderRadius: 22,
paddingText: 12,
topPanelBorderRadius: 22,
colorFrontItem: const Color(0xFFE8D5EA),
colorBackgroundTopPanel: const Color(0xFFCA74DA),
colorBackItem: const Color(0xFFC8E6C9),
textStyle: const TextStyle(
color: Color(0xFF1C2AC4),
fontSize: 18,
),
),
),
copied to clipboard
Result:

Get the result of words #
To get the result, you can use the .getResult() method, which returns <int, Map<int, String>>
Examples:
textResult = wordCController.getResult().toString();
// textResult = '{0: {0: 'We', ...}, 1: ...}'
copied to clipboard
We can also set the index of the page:
textResult = wordCController.getResult(pageIndex: i).toString();
// textResult = '{0: 'We', 1: 'go', ...}'
copied to clipboard
Future updates #

ability to listen to words
custom styles for certain words

Contact #
github: yurymorozov

License

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

Share

• Share on Facebook
• Share on Twitter