Search packages, repositories and app categories

GitHub repositorydevmuaz/instagram-mention

instagram-mention

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

instagram-mention project cover
Stars
27
Forks
4
Last push (UTC)
Jan 16, 2024
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

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, 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: <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',
            ),
          ],
        ),
      ),
    );
  }
}

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

Medium articles by the author

You can always read the articles I write on my devmuaz 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

AbdulMuaz Aqeel GitHub avatar
GitHub author

AbdulMuaz Aqeel ↗

Sr. Software Engineer

@talabateyIraq, BaghdadOfficial website ↗
LanguagesDartSwiftKotlinObjective-C

Categories

Dependencies used

Dependency list 2 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗