Textfield-based rich input box

Overview

flutter_rich_input is no longer used and uses a better way to enable a new rich_input plugin, click here to see it!

flutter_rich_input 不再维护,使用了更好的方式,新启动了一个新的 rich_input 插件,点击这里查看

This is a high performance rich media input box, implemented through the native textfield extension, with less disruptive, but at the same time has a strong extensibility, implements the @ someone, # topics, expressions and other functions, support custom color highlighting

Language: English | 中文简体

Special feature

  • Use native textfield capabilities with less code, less disruption and subsequent compatibility
  • Support @someone #topic and insert emojis, etc.
  • Support for custom highlighting and even your own rendering
  • Support for custom value fields to enhance rich text

Demo

Getting Started

import 'package:flutter/material.dart';
import 'package:flutter_rich_input/block/rich_block.dart';
import 'package:flutter_rich_input/flutter_rich_input.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  RichInput _richInput;
  FocusNode _focusNode;

  @override
  void initState() {
    _focusNode = FocusNode();
    _richInput = RichInput();
    // refresh text and value
    _richInput.controller.addListener(() {
      setState(() {});
    });
    _richInput.addText("text");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              _richInput.textField(focusNode: _focusNode),
              Wrap(
                spacing: 10,
                children: [
                  RaisedButton(
                    onPressed: () {
                      _richInput.addText("text");
                    },
                    child: const Text("Add Text"),
                  ),
                  RaisedButton(
                    onPressed: () {
                      _richInput.addText("😁");
                    },
                    child: const Text("Add 😁"),
                  ),
                  RaisedButton(
                    onPressed: () {
                      _richInput.addText("👍");
                    },
                    child: const Text("Add 👍"),
                  ),
                  RaisedButton(
                    onPressed: () {
                      final at = RichBlock(text: " @abc ", value: " @123456 ");
                      _richInput.addBlock(at);
                    },
                    child: const Text("Add @    "),
                  ),
                  RaisedButton(
                    onPressed: () {
                      final at = RichBlock(
                        text: " #subject ",
                        value: " #888999 ",
                        style: const TextStyle(
                          color: Colors.red,
                          fontWeight: FontWeight.bold,
                        ),
                      );
                      _richInput.addBlock(at);
                    },
                    child: const Text("Add #"),
                  ),
                  RaisedButton(
                    onPressed: () {
                      _richInput.clear();
                    },
                    child: const Text("Clear"),
                  ),
                  RaisedButton(
                    onPressed: () {
                      _focusNode.unfocus();
                    },
                    child: const Text("unfocus"),
                  )
                ],
              ),
              const SizedBox(height: 10),
              Text("Text:${_richInput.text}"),
              const SizedBox(height: 10),
              Text("Value:${_richInput.value}"),
            ],
          ),
        ),
      ),
    );
  }
}

Provide additional api via RichInput class and interface consistent with native textfield via RichInput.textfield method

You might also like...

A Flutter app based on the design of the Social Media Integeration App

A Flutter app based on the design of the Social Media Integeration App

A Flutter app based on the design of the Social Media Integeration App

Dec 8, 2021

MoviesApp based on themoviedb API

MoviesApp based on themoviedb API

Movies App 🎬 Hi, do you like movies? 😁 Try MoviesApp here, or if you are a developer click here. There are currently 4 themes in the app. Search for

Jan 1, 2023

A proximity based chat room

grid 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 is

Sep 1, 2022

Flutter based android app

Ask Us Ask Us is a flutter based android app. It's basically a discussion forum somewhat like Quora, designed to ask questions, share their experience

Dec 13, 2022

A Dart FFI package to send 💬 toasts on Windows. Written in C++, based on WinToast.

A Dart FFI package to send 💬 toasts on Windows. Written in C++, based on WinToast.

desktoasts A Dart package to send native 💬 toasts on Windows. Installation For Flutter dependencies: ... desktoasts: ^0.0.2 For Dart CLI here Sup

Mar 7, 2022

Body mass index (BMI) is a measure of body fat based on height and weight that applies to adult men and women. Here is the simple program for BMI calculator in Flutter.

Body mass index (BMI) is a measure of body fat based on height and weight that applies to adult men and women. Here is the simple program for BMI calculator in Flutter.

BMI-Calculator Body mass index (BMI) is a measure of body fat based on height and weight that applies to adult men and women. Here is the simple progr

Oct 31, 2021

Dart package to rank proposals according to Majority Judgment, using a score-based algorithm for performance and scalability

Majority Judgment for Dart This Dart package helps to resolve polls using Majority Judgment. Features Efficient Majority Judgment algorithm, scales we

Oct 18, 2021

An Android/iOS based NFT marketplace.

An Android/iOS based NFT marketplace.

NFT Store Inspiration I first got the idea to create NFT Store by looking at the $69 million Beeple's NFT. The piece of art is made from 5,000 tiles m

Nov 25, 2022
Owner
yung
涉及Web开发,App跨平台,小游戏引擎,小程序引擎,最近在研究flutter技术
yung
Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to connect with friends,family & colleagues. Developed as a redesign of Microsoft Teams during my menteeship at Microsoft Engage 2021

Microsoft Teams Clone by Karanjot Singh About Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to conne

Karanjot Singh 60 Dec 28, 2022
display a Dart string in Flutter using simple rich text characters

simple_rich_text Easily format Flutter text with simple format characters. Motivation: lowest-possible development friction to add color and formattin

Peter Alvin 16 Dec 5, 2022
Feature-rich and easy-to-use Minecraft Fallout server bot.

更好的 Minecraft 廢土伺服器機器人 ?? 介紹 這是個具有許多功能的廢土機器人,且完全免費與開源 另一大特色就是具有容易操作的界面,而不是傳統的小黑窗,讓任何人都能夠輕鬆使用~ 詳細功能請看 這裡 祝您使用愉快! 立即下載 ?? 下載 本軟體支援 Windows、Linux、macOS 作

菘菘 9 Dec 23, 2022
a meme-based chat application

MemeChat An example of a meme-enabled chat app on Flutter, using Firebase, Google Sign In, and device camera integration. MemeChat contains platform-s

Emily Fortuna 528 Dec 25, 2022
Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player First Open Source Flutter based Beautiful Material Design Music Player(Online Radio will be added soon.) Demo App Play Store BETA

Pawan Kumar 1.5k Jan 8, 2023
AuthPass - Password Manager based on Flutter for all platforms. Keepass 2.x (kdbx 3.x) compatible.

AuthPass.app - Open Source Password Manager for mobile and desktop AuthPass - Password Manager based on Flutter for all platforms. Keepass 2.x (kdbx 3

AuthPass 1.5k Jan 5, 2023
gui automation based on pyautogui python as backend and flutter desktop as frontend, drag and drop tool, no coding required.

GUI_AUTOMATION gui automation based on pyautogui python as backend and flutter desktop as frontend, drag and drop tool, no coding required. Install py

Hassan Kanso 34 Oct 30, 2022
Upper is a open source back-end framework based on the Dart language.

What is Upper? Upper is a open source back-end framework based on the Dart language. With it, it is possible to automatically generate a gRPC API for

Andriws Luna 40 Sep 5, 2022
A bugless implementation of BigDecimal in Dart based on Java's BigDecimal

big_decimal A bugless implementation of BigDecimal in Dart based on Java's BigDecimal Installation Add the following to your pubspec.yaml: dependencie

null 18 Jul 27, 2022
Encryption based on asymmetric cryptography

RSA Encryption Flutter Make sensitive conversations safe. Give your conversation partner your public key to encrypt the message for you, which only yo

Szántó Benjámin 23 Jan 8, 2023