word_collector #

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

Getting started #

Add dependency #

dependencies:
  word_collector:

Add package import #

import 'package:word_collector/word_collector.dart';

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'],
    }; 

Step 2 #

Create a WordCollectorController():

final wordCController = WordCollectorController();

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(),
                ),
            ],...

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,
        ), 
    ),
),

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: ...}'

We can also set the index of the page:

textResult = wordCController.getResult(pageIndex: i).toString();
// textResult = '{0: 'We', 1: 'go', ...}'

Future updates #

• ability to listen to words
• custom styles for certain words

Contact #

github: yurymorozov