A simple detailed flutter widget that looks almost the same as the real instagram mention widget.

Related tags

Templates dart flutter
Overview

Instagram Mention Widgets

Instagram CustomPainter

'small details do matter' ❤️

This package provides simple and almost the same UI details that the real Instagram mention widget has.

It contains two types of widgets

  • InstagramMention - Only Text
  • InstagramMentionWithAvatar - Text and Image

Usage

You can simply use the widgets inside your app like this

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            // Text only
            InstagramMention(text: 'Lily Collins'),
            
            const  SizedBox(height: 75),
            
            // Text and Image
            InstagramMentionWithAvatar(
              image: Image.network('https://i.pinimg.com/originals/1f/b5/67/1fb567258e278aae24f49e6d5a1950b4.jpg'),
              text:  'Lily Collins',
            ),
          ],
        ),
      ),
    );
  }
}

Demo

Instagram CustomPainter

Medium articles by the author

You can always read the article I write on my Medium account which I write pretty great Flutter content out there.

License

MIT License

Copyright (c) 2014 - 2021 devmuaz

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.
You might also like...

Serialize almost everything you ever need! 📦 Supports serializing MaterialColor, Color, Size, Locale, IconData, UuidValue, DateTime, Directory, File, Duration, and many more.

Serialize almost everything you ever need! 📦 Supports serializing MaterialColor, Color, Size, Locale, IconData, UuidValue, DateTime, Directory, File, Duration, and many more.

osum_serializable The goal is to serialize almost everything you ever need! json_serializable is an amazing package to serialize classes but cannot se

Sep 23, 2022

RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.

RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.

RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices. Usage It is VERY easy

Nov 25, 2022

Display multiple simple messages at a same time.

Display multiple simple messages at a same time.

Simple multipurpse flashes to announce different messages to the user and interact with them. Display multiple flashes at the same time and avoid writ

Oct 10, 2022

Build a calculator app in iOS and Android with the same code by using flutter.

flutter_calculator Preview Structure Input Widgets input widgets is all extends StatefulWidget, because they need to response the onTap gesture. Numbe

Nov 24, 2022

Peek & Pop implementation for Flutter based on the iOS functionality of the same name.

peek_and_pop Peek & Pop implementation for Flutter based on the iOS functionality of the same name. Finally, the v1.0.0 release! More fluent, more opt

Dec 17, 2022

The same old Weather App, But 'In Flutter , By Me'

The same old Weather App, But 'In Flutter , By Me'

Weather App v1.0.1 About The same old Weather App, But 'In Flutter , By Me' . NB Still in developement Stats ### v1.0.1 - Started a Basic outline of

Sep 7, 2022

[Flutter package] An easy and quick way to check if the local app is updated with the same version in their respective stores (Play Store / Apple Store ).

Retrieve version and url for local app update against store app Android and iOS Features Using as reference packages like in_app_update , version_chec

Nov 9, 2022

Mobile, desktop and website Apps with the same code

Mobile, desktop and website Apps with the same code

Mobile, desktop and website Apps with the same code This project shows how the source code can be architectured to run on multiple devices. As of now,

Jan 1, 2023
Owner
AbdulMuaz Aqeel
AKA The bitByte Guy, Software Developer & Hardware Lover
AbdulMuaz Aqeel
A clock created for the Flutter Clock challenge which achieved an honourable mention.

Circle Clock A clock created for the Flutter Clock challenge. Shaded circles representing hour, minute and second hands move across the screen, while

Max 11 Apr 18, 2022
Approximate how your app looks and performs on another device.

Approximate how your app looks and performs on another device. Main features Preview any device from any device Change the device orientation Dynamic

Aloïs Deniel 1.8k Jan 7, 2023
Facebook based-app - A Facebook based app which actually looks like Facebook

Facebook based mobile application This project is a mobile application which act

Munem Sarker 3 Nov 23, 2022
App-flutter-real-estate - Real Estate App Built With Flutter

Real Estate App - Flutter Preview video: https://youtu.be/11u0KeymAAs My Twitter

Sangvaleap Vanny 136 Dec 7, 2022
Instagram-clone - Instagram clone built using flutter and Firebase

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

null 5 Jul 18, 2022
A radio component suitable for almost any radio scenario.

fradio A radio component suitable for almost any radio scenario. Supports excellent interactive special effects, as well as a simple multi-interactive

Fliggy Mobile 75 Nov 26, 2022
A powerful state machine for MobX management, that can be used in almost any application state.

A powerful state machine for MobX management, which can be used in almost any application state. It has 3 states - loading, success, error - and is pe

Daniel Magri 8 Oct 31, 2022
Mobile app for small food business have more results spending almost nothing.

ilunch Mobile app for small food business have more results spending almost nothing. Getting Started This project is a starting point for a Flutter ap

Roque Costa 9 Nov 17, 2022