パッケージ、リポジトリ、アプリカテゴリを検索

GitHub リポジトリdevmuaz/instagram-mention

instagram-mention

実際のInstagramのメンションウィジェットとほぼ同じように見える、シンプルで詳細なFlutterウィジェット。

instagram-mention のプロジェクト画像
スター
27
フォーク
4
最終プッシュ(UTC)
2024/01/16
プロジェクト状態
公開中

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

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 作者

AbdulMuaz Aqeel ↗

Sr. Software Engineer

@talabateyIraq, Baghdad公式サイト ↗
言語DartSwiftKotlinObjective-C

カテゴリー

使用している依存関係

依存関係一覧 2 件

  • flutter{"sdk":"flutter"}
  • flutter_test開発用{"sdk":"flutter"}

プロジェクトに合うリポジトリを選ぶには?

用途で絞り込み、開発状況を比較し、採用前に元のリポジトリで要件を確認しましょう。

  1. 名前・作者・説明で検索し、技術トピックで絞り込みます。
  2. スター、フォーク、最近のプッシュを比較します。スターは関心の目安であり、品質の保証ではありません。
  3. 利用前に GitHub で README、ライセンス、Issues を確認します。

情報源と管理

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

GitHub Docs — About repositories ↗