https://github.com/devmuaz/instagram-mention

A simple detailed flutter widget that looks almost the same as the real instagram mention widget.
https://github.com/devmuaz/instagram-mention

dart flutter

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/devmuaz/instagram-mention
• Owner: devmuaz
• License: mit
• Created: 2021-03-07T22:07:01.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-01-16T01:38:01.000Z (8 months ago)
• Last Synced: 2024-07-28T10:11:30.134Z (about 2 months ago)
• Topics: dart, flutter
• Language: Dart
• Homepage:
• Size: 232 KB
• Stars: 25
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Instagram Mention Widgets

![Instagram CustomPainter](https://github.com/devmuaz/instagram_mention/blob/master/images/instagram_widget.png)

### '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

```dart

class MyHomePage extends StatelessWidget {

  const MyHomePage({Key? key, required 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: [

            // 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',

            ),

          ],

        ),

      ),

    );

  }

}

```

Or, you can use the custom `Painter` class that I've provided `RectangleWithNotchPainter` so you can apply the painting style to any widget you like.

## Demo

![Instagram CustomPainter](https://github.com/devmuaz/instagram_mention/blob/master/images/main_demo.png)

## Medium articles by the author

You can always read the articles I write on my [devmuaz](https://devmuaz.medium.com/) account which I write pretty great flutter content out there.

## Contributions & Support

Issues and pull requests are always welcome 😄

If you find this package useful for you and liked it, give it a like ❤️ and star the repo ⭐️ it would mean a lot!

## License

**MIT**