An Instagram like text editor Flutter widget that helps you to change your text style.

Last update: Aug 6, 2022

TextEditor

Version GitHub license

An instagram like text editor widget for flutter

Show some ❤️ and star the repo to support the project

Features

  • Edit TextStyle object
    • font color
    • font family
    • font size
  • Edit TextAlign

Screenshot

text_editor

Installation

Add text_editor: ^0.4.0 to your pubspec.yaml dependencies. And import it:

import 'package:texte_editor/text_editor.dart';

How to use

Simply create a TextEditor widget, and pass the required params:

TextEditor(
  fonts: fonts,
  paletteColors: colors,
  text: text,
  textStyle: textStyle,
  textAlingment: textAlign,
  onEditCompleted: (style, align, text) {
    setState(() {
      _text = text;
      _textStyle = style;
      _textAlign = align;
    });
  },
)

Customize editor

If you need to customize the editor's design, you can use decoration and customize its items.

TextEditor(
  fonts: fonts,
  text: text,
  textStyle: textStyle,
  textAlingment: textAlign,
  decoration: EditorDecoration(
    doneButton: Icon(Icons.close, color: Colors.white),
    fontFamily: Icon(Icons.title, color: Colors.white),
    colorPalette: Icon(Icons.palette, color: Colors.white),
    alignment: AlignmentDecoration(
      left: Text(
        'left',
        style: TextStyle(color: Colors.white),
      ),
      center: Text(
        'center',
        style: TextStyle(color: Colors.white),
      ),
      right: Text(
        'right',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
),

For more information see examples

MIT License

Copyright (c) 2020 Mehdi Zarepour

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

GitHub

https://github.com/mehdizarepour/text_editor
Comments
  • 1. Add text background color

    First of all Thanks for this nice package !

    any plan to support text background color ? I can see it's for TODO and Widget is already there

                        // TODO: Add text background color
                          // SizedBox(width: 20),
                          // TextBackgroundColor(),
    
    Reviewed by azazadev at 2021-06-17 10:29
  • 2. Change "DONE" button text

    Hi ! Firstly, thanks a lot for this plugin, its awesome

    Then, I would like to be able to change the "DONE" button text by a text of my choice. Can you please take a look to provide us a way to change it ? Thank you

    Reviewed by 88hitman at 2020-11-25 16:48
  • 3. Provider package dependency error

    Hi,

    I just added Provider 6.0 to my app and got an error running "pub get". text_editor is dependent on Provider 5.0 and my app needs Provider 6.0. I am new to flutter, can this be easily solved? (I am used to node.js dependencies where such things are a no issue). If not then I think that using Provider in this package is problematic, as a "utility package" it is a problem for it to prevent apps using this package from using whatever version of another "utility package" (ie Provider).

    In any case, thank you for sharing this package !

    Reviewed by ValYouW at 2021-11-05 16:26
  • 4. custom min/max FontSize

    it's possible to add new params for fontSize min/max value in TextEditor ? as of now this is hardcoded

    @override
      Widget build(BuildContext context) {
        return Consumer<TextStyleModel>(
          builder: (context, model, child) => RotatedBox(
            quarterTurns: 3,
            child: Slider(
              value: model.textStyle?.fontSize ?? 1,
              min: 0,
              max: 100,
              divisions: 100,
              activeColor: Colors.white,
              inactiveColor: Colors.white,
              onChanged: (double value) => model.editFontSize(value),
            ),
          ),
        );
      }
    
    Reviewed by azazadev at 2021-06-17 10:35
  • 5. Update Needs

    I request for update this package. Or can any one suggest how to change dependencies of this package? I want to change provider version and I need to use in Flutter 2.

    Reviewed by jaykukadiya99 at 2021-03-26 06:51
  • 6. Add Font Weight

    Hi, thank you for awesome package

    I have fork this package and add ability to set bold or normal fontstyle. And yes this feature not available in instagram. So before i request to pull request do you want to approve? if not can i publish this package with my account to pub.dev

    Thankyou

    Reviewed by hifiaz at 2021-07-16 17:30

Related

It's a universal app template to have a great animated splash screen and liquid slider. Just change the animation if you want (rive) and change the images or colours according to your app.

liquid A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Jul 4, 2022
A Fluter tabview that text color can change with animation and bg color change with animation
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

Dec 8, 2021
ITS A SIMPLE CRYPTO APP THAT GIVES OR DISPLAYS PRICES - %CHANGE AND CHANGE VALUE OF TICKER (VARIOUS CRYPTO ASSERTS)

btcpricetracker A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Dec 28, 2021
Json editor - A json editor on flutter
Json editor - A json editor on flutter

Features Support add comment; Support show errors for invalid json text; Pretty

Jul 24, 2022
Dec 29, 2021
Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.
Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

dismissible_page ?? ?? Creates page that is dismissed by swipe gestures, with Hero style animations, Inspired by FB, IG stories. Live Demo Contents Su

Jul 13, 2022
A pattern editor, in the "style" of a Tracker, for the Korg Electribe 2's (synth, sampler, hacktribe).
A pattern editor, in the

elfer A pattern editor, in the "style" of a Tracker, for the Korg Electribe 2's (synth, sampler, hacktribe). Status This is very much a WORK-IN-PROGRE

Jul 30, 2022
Instagram-clone - Instagram clone built using flutter and Firebase
Instagram-clone - Instagram clone built using flutter and Firebase

Instagram-clone statistics of Firebase usage User Authentication for Instagram l

Jul 18, 2022
Create bulk instagram quotes posts with custom background, style, font, size. built using flutter
Create bulk instagram quotes posts with custom background, style, font, size. built using flutter

Mini Canva minicanva.com Bulk Image Generator from given list of quotes, lines ?? Purpose Etsy is an E-commerce platform where we can sell digital goo

Jun 26, 2022
Neumorphic style - Example app with Flutter that displays a neumorphic style container
Neumorphic style - Example app with Flutter that displays a neumorphic style container

Flutter Neumorphic Style Example App Example app with Flutter that displays a ne

Mar 24, 2022
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Jul 27, 2022
Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, tutorials, etc...
Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, tutorials, etc...

MegaLinks Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, t

Jul 8, 2022
Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop.
Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop.

Git+ for GitLab Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop. Git+ lets you see

Aug 9, 2022
A new Flutter package which helps you to implement Ticket Widget in your app.
A new Flutter package which helps you to implement Ticket Widget in your app.

flutter_ticket_widget A new Flutter package which helps you to implement Ticket Widget in your app. The source code is 100% Dart, and everything resid

Apr 27, 2022
Masked text field - A flutter package for masked text field for formet your text and good UI
Masked text field - A flutter package for masked text field for formet your text and good UI

Masked Text Field Masked Text Field Features A package for masked text field for

May 27, 2022
Creating complete social media app like instagram, facebook using flutter dart.

instoo The social media application that allows user to check out new feed, like, comment and even check other user’s profile. It has search, follow,

Aug 9, 2022
Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.
Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.

flutter_instagram_stories A Flutter package for displaying stories just like Whatsapp & Instagram. Built-in groups (multiple stories with one icon), c

Jul 19, 2022
Rich text editor for Flutter
Rich text editor for Flutter

A rich text editor for Flutter FlutterQuill is a rich text editor and a Quill component for Flutter. This library is a WYSIWYG editor built for the mo

Aug 12, 2022