This package adds an easy to use and beautiful word collector widget
dependencies:
word_collector:
import 'package:word_collector/word_collector.dart';
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'],
};
Create a WordCollectorController()
:
final wordCController = WordCollectorController();
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(),
),
],...
Result:
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,
),
),
),
Result:
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: ...}'
We can also set the index of the page:
textResult = wordCController.getResult(pageIndex: i).toString();
// textResult = '{0: 'We', 1: 'go', ...}'
- ability to listen to words
- custom styles for certain words