Flutter自定义UI组件插件insta_widgets的使用

Flutter自定义UI组件插件insta_widgets的使用

特性

  • 可以像Instagram一样选择图片。
  • 可以像Instagram一样拍摄照片。
  • 可以像Instagram一样放大查看图片。

支持平台

  • Flutter Android
  • Flutter iOS

截图

安装

在pubspec.yaml文件中添加insta_widgets依赖：

flutter pub add insta_widgets

Android

你需要在android/app/src/main/res/AndroidManifest.xml中添加以下权限：

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

iOS

你需要在ios/Runner/Info.plist中添加以下权限，并附上描述：

<key>NSMicrophoneUsageDescription</key>
<string>your description</string>
<key>NSCameraUsageDescription</key>
<string>your description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>your description</string>

导入

在你的Dart文件中导入insta_widgets包：

import 'package:insta_widgets/insta_widgets.dart';

如何使用？

InstaPhotoPicker

选择照片

InstaPhotoPicker.instance.pickPhotos(
  context: context,
  onPicked: (photos) => setState(() {
    _pickedPhotos.clear();
    _pickedPhotos.addAll(photos);
  }),
  onTookPicture: (photo){
    if(photo != null) setState(() => _pickedPhotos.add(photo));
  },
)

拍摄照片

InstaPhotoPicker.instance.takePicture(
  context: context,
  onTookPicture: (photo){
    if(photo != null) {
      setState((){
        _pickedPhotos.clear();
        _pickedPhotos.add(photo);
      });
    }
  }
)

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:insta_widgets/insta_widgets.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PhotoListPage(),
    );
  }
}

class PhotoListPage extends StatefulWidget {
  const PhotoListPage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<PhotoListPage> createState() => _PhotoListPageState();
}

class _PhotoListPageState extends State<PhotoListPage> {
  final List<String> _photos = [
    "https://upload.wikimedia.org/wikipedia/commons/0/0f/IU_posing_for_Marie_Claire_Korea_March_2022_issue_03.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/%E2%80%98LG_Q7_BTS_%EC%97%90%EB%94%94%EC%85%98%E2%80%99_%EC%98%88%EC%95%BD_%ED%8C%90%EB%A7%A4_%EC%8B%9C%EC%9E%91_%2842773472410%29_%28cropped%29.jpg/640px-%E2%80%98LG_Q7_BTS_%EC%97%90%EB%94%94%EC%85%98%E2%80%99_%EC%98%88%EC%95%BD_%ED%8C%90%EB%A7%A4_%EC%8B%9C%EC%9E%91_%2842773472410%29_%28cropped%29.jpg"
  ];

  final List<InstaPhoto> _pickedPhotos = [];

  Widget _buildInstaPhoto(BuildContext context, int index) {
    return InstaPhotoBuilder(
      photoURL: _photos[index],
    );
  }

  Widget _buildPhoto(int index) {
    return Image.memory(_pickedPhotos[index].cropBytes ??  _pickedPhotos[index].bytes);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Insta Widgets Example'),
        actions: [
          IconButton(
              icon: const Icon(Icons.camera_alt_outlined),
              onPressed: () => InstaPhotoPicker.instance.takePicture(
                context: context,
                onTookPicture: (photo){
                  if(photo != null) {
                    setState((){
                      _pickedPhotos.clear();
                      _pickedPhotos.add(photo);
                    });
                  }
                }
              )
          ),
          IconButton(
              icon: const Icon(Icons.add_circle_outline_outlined),
              onPressed: () => InstaPhotoPicker.instance.pickPhotos(
                context: context,
                onPicked: (photos) => setState(() {
                  _pickedPhotos.clear();
                  _pickedPhotos.addAll(photos);
                }),
                onTookPicture: (photo){
                  if(photo != null) setState(() => _pickedPhotos.add(photo));
                },
              )
          )
        ],
      ),
      body: Column(
        children: [
          SizedBox(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: _pickedPhotos.length,
              itemBuilder: (context, index) => _buildPhoto(index),
            ),
          ),
          Expanded(
            child: ListView.separated(
              separatorBuilder: (context, index) => const SizedBox(),
              itemCount: _photos.length,
              itemBuilder: _buildInstaPhoto,
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter自定义UI组件插件insta_widgets的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义UI组件插件insta_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


insta_widgets 是一个为 Flutter 开发者提供的自定义 UI 组件库，旨在帮助开发者快速构建类似于 Instagram 风格的 UI 组件。通过使用这个插件，你可以轻松地创建出与 Instagram 应用相似的界面元素，如故事卡片、帖子卡片、评论框等。

安装 insta_widgets

首先，你需要在 pubspec.yaml 文件中添加 insta_widgets 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  insta_widgets: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 insta_widgets

以下是一些常见的 insta_widgets 组件的使用示例：

1. 故事卡片 (StoryCard)

故事卡片是 Instagram 应用中常见的组件，通常用于显示用户的头像和用户名。

import 'package:flutter/material.dart';
import 'package:insta_widgets/insta_widgets.dart';

class StoryCardExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Story Card Example'),
      ),
      body: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          StoryCard(
            imageUrl: 'https://via.placeholder.com/150',
            username: 'user1',
            onTap: () {
              print('Story tapped!');
            },
          ),
          StoryCard(
            imageUrl: 'https://via.placeholder.com/150',
            username: 'user2',
            onTap: () {
              print('Story tapped!');
            },
          ),
          // 添加更多故事卡片
        ],
      ),
    );
  }
}

2. 帖子卡片 (PostCard)

帖子卡片用于显示用户发布的图片、描述、点赞数等信息。

import 'package:flutter/material.dart';
import 'package:insta_widgets/insta_widgets.dart';

class PostCardExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Post Card Example'),
      ),
      body: ListView(
        children: [
          PostCard(
            username: 'user1',
            userImageUrl: 'https://via.placeholder.com/150',
            postImageUrl: 'https://via.placeholder.com/600',
            likes: 123,
            description: 'This is a sample post description.',
            comments: [
              'Great post!',
              'I love this!',
              'Keep it up!',
            ],
            onLikePressed: () {
              print('Like button pressed!');
            },
            onCommentPressed: () {
              print('Comment button pressed!');
            },
            onSharePressed: () {
              print('Share button pressed!');
            },
          ),
          // 添加更多帖子卡片
        ],
      ),
    );
  }
}

3. 评论框 (CommentBox)

评论框用于用户输入和显示评论。

import 'package:flutter/material.dart';
import 'package:insta_widgets/insta_widgets.dart';

class CommentBoxExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Comment Box Example'),
      ),
      body: Column(
        children: [
          CommentBox(
            onCommentSubmitted: (String comment) {
              print('Comment submitted: $comment');
            },
          ),
          // 显示已提交的评论
        ],
      ),
    );
  }
}
回到顶部