Flutter联系我们功能插件contactus的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter联系我们功能插件contactus的使用

Contact Us

在任何商业应用程序中,最常见的功能之一是添加开发者的联系方式。contactus插件可以帮助开发者轻松地将他们的联系信息集成到应用中。

功能特性

  • 详细信息展示:支持公司名称、电话号码、网站、邮箱、Twitter账号、Instagram账号、Facebook账号、LinkedIn链接和GitHub用户名等。
  • 点击跳转:用户点击任一联系信息时,会直接跳转至相应的应用程序或网页。
  • 自定义样式:可以自定义公司/个人名称、标语及文本的字体,以及分隔线的颜色和字体粗细。
  • 底部导航栏集成:能够作为BottomNavigationBar的一部分来显示联系信息。

示例代码

创建一个完整的页面

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: ContactUs(
          logo: AssetImage('images/crop.jpg'),
          email: 'adoshi26.ad@gmail.com',
          companyName: 'Abhishek Doshi',
          phoneNumber: '+91123456789',
          dividerThickness: 2,
          website: 'https://abhishekdoshi.godaddysites.com',
          githubUserName: 'AbhishekDoshi26',
          linkedinURL: 'https://www.linkedin.com/in/abhishek-doshi-520983199/',
          tagLine: 'Flutter Developer',
          twitterHandle: 'AbhishekDoshi26',
          instagramUserName: '_abhishek_doshi',
        ),
      ),
    );
  }
}

在BottomNavigationBar中添加联系信息

bottomNavigationBar: ContactUsBottomAppBar(
          companyName: 'Abhishek Doshi',
          textColor: Colors.white,
          backgroundColor: Colors.teal.shade300,
          email: 'adoshi26.ad@gmail.com',
        ),

完整示例Demo

以下是一个包含所有配置选项的完整示例:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        bottomNavigationBar: ContactUsBottomAppBar(
          companyName: 'Abhishek Doshi',
          textColor: Colors.white,
          backgroundColor: Colors.teal.shade300,
          email: 'adoshi26.ad@gmail.com',
        ),
        backgroundColor: Colors.teal,
        body: ContactUs(
          cardColor: Colors.white,
          textColor: Colors.teal.shade900,
          logo: const AssetImage('images/logo.jpg'),
          email: 'adoshi26.ad@gmail.com',
          companyName: 'Abhishek Doshi',
          companyColor: Colors.teal.shade100,
          dividerThickness: 2,
          phoneNumber: '+917818044311',
          website: 'https://abhishekdoshi.godaddysites.com',
          githubUserName: 'AbhishekDoshi26',
          linkedinURL: 'https://www.linkedin.com/in/abhishek-doshi-520983199/',
          tagLine: 'Flutter Developer',
          taglineColor: Colors.teal.shade100,
          twitterHandle: 'AbhishekDoshi26',
          instagram: '_abhishek_doshi',
          facebookHandle: '_abhishek_doshi',
        ),
      ),
    );
  }
}

通过上述代码,您可以创建一个具有丰富联系信息的应用页面,并且还可以将其集成到底部导航栏中。希望这些信息对您有所帮助!如果您有任何问题或需要进一步的帮助,请随时提问。


更多关于Flutter联系我们功能插件contactus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter联系我们功能插件contactus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,虽然没有一个官方或广泛认可的名为 contactus 的插件专门用于“联系我们”功能,但你可以通过组合多个Flutter插件和自定义代码来实现这一功能。通常,“联系我们”功能可能包括显示联系信息、发送电子邮件或短信等。

以下是一个示例,展示了如何使用Flutter和几个常用插件来实现一个基本的“联系我们”功能,包括显示联系信息和发送电子邮件。

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加必要的依赖项,例如 url_launcher 用于打开URL(如电子邮件或电话),flutter_email_sender 用于发送电子邮件。

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.12  # 请检查最新版本
  flutter_email_sender: ^5.0.2  # 请检查最新版本

2. 导入插件并编写代码

在你的 Dart 文件中(例如 contact_us_page.dart),导入这些插件并编写相应的功能。

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';

class ContactUsPage extends StatelessWidget {
  static const routeName = '/contact_us';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('联系我们'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('联系信息:', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            SizedBox(height: 8),
            Text('电话: 123-456-7890'),
            SizedBox(height: 8),
            Text('邮箱: example@example.com'),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: () => launchEmail(),
              child: Text('发送邮件'),
            ),
            SizedBox(height: 8),
            ElevatedButton(
              onPressed: () => launchPhoneCall(),
              child: Text('拨打电话'),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> launchEmail() async {
    final Email email = Email(
      body: '这是邮件的正文内容。',
      subject: '联系信息',
      recipients: ['example@example.com'],
      isHTML: false,
    );

    String platformResponse;

    try {
      await FlutterEmailSender.send(email);
      platformResponse = '成功发送邮件!';
    } catch (e) {
      platformResponse = '发送邮件失败: ${e.message}';
    }

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(platformResponse)),
    );
  }

  Future<void> launchPhoneCall() async {
    const url = 'tel:1234567890';
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('无法拨打电话')),
      );
    }
  }
}

3. 在应用中导航到联系我们页面

在你的主应用文件(例如 main.dart)中,添加路由以导航到“联系我们”页面。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        ContactUsPage.routeName: (context) => ContactUsPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, ContactUsPage.routeName),
          child: Text('联系我们'),
        ),
      ),
    );
  }
}

这个示例展示了如何创建一个基本的“联系我们”页面,其中包含显示联系信息和发送电子邮件的功能。你可以根据需要进一步扩展这个示例,例如添加更多的联系方式或自定义UI。

回到顶部