text_drawable_widget 0.0.2

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new58

text_drawable_widget

This light-weight library provides images with letter/text like the Gmail or Android contact apps

<img src="https://raw.githubusercontent.com/pranayairan/TextDrawableWidget/master/images/tdw_unselected.png" height="580" width="320" > <img src="https://raw.githubusercontent.com/pranayairan/TextDrawableWidget/master/images/tdw_selected.png" height="580" width="320" >

Pub Package Can Be Found At

Pub Package

Usage

Text Drawable Widget support 2 types of mode, 1 is the default mode and other is more customizable advance mode.

Default Mode

To use default mode, import the text drawable widget file in your project and add following line

 TextDrawableWidget(data, ColorGenerator.materialColors, (bool selected) {
                  // on tap callback
                }),

This will add the text drawable widget, with default size, colors and fonts. Default size is 60 * 60 with a text style of size 28 and color white.

Customizable Mode

You can customize everything in text drawable widget. From fonts to size of the widget. Here are options that you can customized.

  • Width and height of widget.
  • If widget is tapable or not. With this option you can disable the tap behavior.
  • Shape of widget, currently we support Circle and rounded corner Square.
  • Text Style, you can customized the text style with any color, fonts, size of your choice.

Example with full customization :

TextDrawableWidget(data, ColorGenerator.materialColors, (bool selected) {
                  // on tap callback
                  print("on tap callback");
                }, true, 60.0, 60.0, BoxShape.rectangle,TextStyle(color: Colors.black, fontSize: 28.0))

Built in Color generator

By default this library ships with 2 sets of colors, material color and default color. But you can customize the color list and give any colors of your choice. To give a different color, use the following code ColorGenerator.create(colorList). It takes List<Color>

You can mix and match the default and customizable mode, check the example project.

[0.0.1] - Nov 20 -2018

  • Initial release with the package info.

[0.0.2] - Nov 20 -2018

  • Updated initial release with correct documents.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:text_drawable_widget/color_generator.dart';
import 'package:text_drawable_widget/text_drawable_widget.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Text Drawable Widget Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final List<String> contacts = [
    "Micky Mouse",
    "Donald Duck",
    "Bugs Bunny",
    "Scooby Doo",
    "SpongeBob",
    "Popeye",
    "Snoopy",
    "Goofy",
    "Jerry Mouse",
    "Tom Cat",
    "Fred Flintstone",
    "Harry Potter",
    "Spider man",
    "Batman",
    "Superman"
  ];

  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Text Drawable Widget Demo"),
      ),
      body: _getContactCardsList(context, widget.contacts),
    );
  }

  Widget _getContactCardsList(BuildContext context, List<String> contacts) {
    return Container(
      margin: EdgeInsetsDirectional.only(start: 8.0, end: 8.0, top: 16.0, bottom: 8.0),
      child: ListView.builder(
        itemBuilder: (BuildContext context, int position) {
          if (position % 3 == 0) {
            return _getCardRowAlternate(context, contacts[position]);
          } else {
            return _getCardRow(context, contacts[position]);
          }
        },
        itemCount: contacts.length,
      ),
    );
  }

  Widget _getCardRow(BuildContext context, String data) {
    return Container(
      margin: EdgeInsets.only(bottom: 4.0),
      child: Card(
        child: InkWell(
          onTap: () {
            // do something
          },
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                TextDrawableWidget(data, ColorGenerator.materialColors, (bool selected) {
                  // on tap callback
                }, false),
                SizedBox(width: 16.0),
                Expanded(
                  child: Text(data, style: Theme.of(context).textTheme.headline),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _getCardRowAlternate(BuildContext context, String data) {
    return Container(
      margin: EdgeInsets.only(bottom: 4.0),
      child: Card(
        child: InkWell(
          onTap: () {
            // do something
          },
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                TextDrawableWidget(data, ColorGenerator.materialColors, (bool selected) {
                  // on tap callback
                  print("on tap callback");
                }, true, 60.0, 60.0, BoxShape.rectangle),
                SizedBox(width: 16.0),
                Expanded(
                  child: Text(data, style: Theme.of(context).textTheme.headline),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  text_drawable_widget: ^0.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:text_drawable_widget/text_drawable_widget.dart';
  
Version Uploaded Documentation Archive
0.0.2 Nov 20, 2018 Go to the documentation of text_drawable_widget 0.0.2 Download text_drawable_widget 0.0.2 archive
0.0.1 Nov 20, 2018 Go to the documentation of text_drawable_widget 0.0.1 Download text_drawable_widget 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
20
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
58
Learn more about scoring.

We analyzed this package on Dec 5, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.7
  • Flutter: 1.0.0

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/text_drawable_widget.dart. (-0.50 points)

Analysis of lib/text_drawable_widget.dart reported 1 hint:

line 7 col 7: This class inherits from a class marked as @immutable, and therefore should be immutable (all instance fields must be final).

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While there is nothing inherently wrong with versions of 0.0.*, it usually means that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test