首页 > 解决方案 > 如何通过点击图像或卡片在应用程序中打开任何 URL?

问题描述

好吧,我是Flutter的新手,正在尝试制作一个简单的名片类应用程序。我无法通过点击此应用程序的图标来弄清楚如何打开应用程序内的任何链接:-
这是我用 Dart 编写的代码(我删除了部分代码,但保留了所需的部分)

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal[300],
        body: SafeArea(
          child: Column(
            //To align everything which is inside the container
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              CircleAvatar(
                radius: 60,
                backgroundColor: Colors.redAccent,
                backgroundImage: AssetImage('images/myself.jpg'),
              ), //image
              Text('Manish',
                  style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 20.0,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  )), //Name
              Text(
                'FLUTTER DEVELOPER',
                style: TextStyle(
                  fontFamily: 'Source Sans Pro',
                  fontSize: 13.0,
                  color: Colors.indigo[900],
                  letterSpacing: 1.8,
                  fontWeight: FontWeight.bold,
                ),
              ), //Flutter developer
              SizedBox(
                height: 25.0,
                width: 200.0,
                child: Divider(
                  color: Colors.lightGreenAccent,
                ),
              ), //Height
              Card(
                color: Colors.white,
                //To resize this container
                margin: EdgeInsets.symmetric(
                  vertical: 1.0,
                  horizontal: 10.0,
                ),
                //There's no padding property in "Card" but if you are using "Container" then you can use
                //padding: EdgeInsets.all(10.0),
                child: Padding(
                    padding: EdgeInsets.all(
                      7.0,
                    ),
                    child: ListTile(
                      leading: Icon(
                        Icons.phone,
                        color: Colors.teal[500],
                        size: 30.0,
                      ),
                      title: Text(
                        '+91 9876543211',
                        style: TextStyle(
                          color: Colors.black,
                          fontFamily: 'Source Sans Pro',
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                        ),
                      ),
                    )),
              ), //Phone Number
              Card(
                color: Colors.white,
                //To resize this container and give spaces for all the container
                margin: EdgeInsets.symmetric(
                  vertical: 10.0,
                  horizontal: 10.0,
                ),
                //There's no padding property in "Card" but if you are using "Container" then you can use
                //padding: EdgeInsets.all(10.0),
                child: Padding(
                    padding: const EdgeInsets.all(7.0),
                    child: ListTile(
                      leading: Icon(
                        Icons.email,
                        color: Colors.teal[500],
                        size: 30.0,
                      ),
                      title: Text(
                        'xfgbxgfbxfg@gmail.com',
                        style: TextStyle(
                          color: Colors.black,
                          fontFamily: 'Source Sans Pro',
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                        ),
                      ),
                    )),
              ), //Email
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: const BorderRadius.all(
                        Radius.circular(13.0),
                      ),
                    ),
                    child: InkWell(
                      child: Container(
                        width: 69.5,
                        height: 69.5,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage('images/LinkedInIcon.png'),
                            fit: BoxFit.fill,
                          ),
                          //shape: BoxShape.rectangle,
                        ),
                      ),
                    ),
                  ), //LinkedIn
                  Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: const BorderRadius.all(
                        Radius.circular(13.0),
                      ),
                    ),
                    child: InkWell(
                      child: Container(
                        width: 70,
                        height: 69,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage('images/GitHubIcon.png'),
                            fit: BoxFit.fill,
                          ),
                          //shape: BoxShape.circle,
                        ),
                      ),
                    ),
                  ), //Github
            ],
          ),
        ),
      ),
    );
  }
}

在此处输入图像描述
谁能帮我这个?

标签: androidflutterdart

解决方案


试试下面的插件,它是一个用于在移动平台上启动 URL 的 Flutter 插件。支持iOS和安卓。

网址启动器

我希望这有帮助。


推荐阅读