Display frequent contacts in share screen sheet

Question

I want to display frequent contacts from a Flutter messaging app like this. Similar to WhatsApp, Messenger, SMS... Is it possible?

Answer 1

The simplest method for sharing is to use a plugin like share_plus:

flutter pub add share_plus

Otherwise, you can always utilize the:

showModalBottomSheet(context: context, builder: (container) => Container());

Here are the benefits and issues of both.

1. The first is the easiest as you can simply call it with the data you want in a message to any app that has deep linking capability. However, the issue is that there is minimal customization here in the layout, ordering, apps, etc. (Note this also only allows you to share with external apps)
2. The secondary is a lot more tedious as you have to build the app sheet yourself (unless you find another plugin that has replicated the sheet). However! you get full control of everything, you can use deep linking like the following with a url_launcher to send externally, but you can also use a it internally to push routes, display dialogs, or much more.

Like this:

var facebook_messenger_link = 'https://m.me/$FaceBook_Nametext=$Message_to_be_sent;`

Overall you can definitley achieve the behaviour you want, whether that be calling native share screens through plugins as above, calling native call through the flutter -> native method channels or building your own custom implementation if you need more control.

Hope this helps

Answer 2

Since the contacts will be from your own app,

• You can populate the upper part of a modalbottomsheet, whcih you will create and then write your other logic based on what you intend to achieve.

Code sample (Can be previewed in Dartpad.dev):

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: InstagramStyleShareSheet()),
    );
  }
}

class InstagramStyleShareSheet extends StatelessWidget {
  const InstagramStyleShareSheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.7,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      child: Column(
        children: [
          _buildHandle(),
          _buildTitle(),
          _buildSearchBar(),
          Expanded(child: _buildShareGrid()),
        ],
      ),
    );
  }

  Widget _buildHandle() {
    return Container(
      margin: const EdgeInsets.only(top: 10),
      width: 40,
      height: 4,
      decoration: BoxDecoration(
        color: Colors.grey[300],
        borderRadius: BorderRadius.circular(2),
      ),
    );
  }

  Widget _buildTitle() {
    return const Padding(
      padding: EdgeInsets.symmetric(vertical: 16),
      child: Text(
        'Share',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget _buildSearchBar() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: TextField(
        decoration: InputDecoration(
          hintText: 'Search...',
          prefixIcon: const Icon(Icons.search),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: BorderSide.none,
          ),
          filled: true,
          fillColor: Colors.grey[200],
        ),
      ),
    );
  }

  Widget _buildShareGrid() {
    final List<Map<String, dynamic>> shareOptions = [
      {'icon': Icons.add_circle_outline, 'label': 'Add post'},
      {'icon': Icons.favorite_border, 'label': 'Favorite'},
      {'icon': Icons.send, 'label': 'Send'},
      {'icon': Icons.messenger_outline, 'label': 'Messenger'},
      {'icon': Icons.link, 'label': 'Copy Link'},
      {'icon': Icons.facebook, 'label': 'Facebook'},
      {'icon': Icons.message, 'label': 'SMS'},
      {'icon': Icons.email_outlined, 'label': 'Email'},
    ];

    return GridView.builder(
      padding: const EdgeInsets.all(16),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        crossAxisSpacing: 16,
        mainAxisSpacing: 16,
      ),
      itemCount: shareOptions.length,
      itemBuilder: (context, index) {
        return _buildShareOption(
          icon: shareOptions[index]['icon'],
          label: shareOptions[index]['label'],
        );
      },
    );
  }

  Widget _buildShareOption({required IconData icon, required String label}) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.grey[200],
          ),
          child: Icon(icon, size: 30),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          textAlign: TextAlign.center,
          style: const TextStyle(fontSize: 12),
        ),
      ],
    );
  }
}

// Usage example
void showInstagramStyleShareSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (BuildContext context) {
      return const InstagramStyleShareSheet();
    },
  );
}

Goodluck!

Answer 3

yea you can show frequent contacts in a flutter messaging app like WhatsApp or Messenger by doing this

track interactions: store user interaction data like message count or last interaction time in your database

calculate frequency: sort contacts by interaction count or how recent they were contacted to find the frequent ones

display ui: use a horizontal ListView.builder in flutter to show the frequent contacts with their profile pics. on tap it takes you to the chat screen

optimize: cache the frequent contacts and use real-time updates for better performance

privacy: make sure data is secure and give users control over their frequent contacts list