How can I make the on pressed function lead to a webpage? - flutter

Question

I have this bit of code and I want the onPressed function for all options on my menu to open a url. I'm not entirely familar with this so I need a little help.
Here is my code below
class NewProfile extends StatefulWidget {
const NewProfile({Key key, this.scaffoldKey}) : super(key: key);
final GlobalKey<ScaffoldState> scaffoldKey;
_NewProfileState createState() => _NewProfileState();
}
class _NewProfileState extends State<NewProfile> {
Widget _menuHeader() {
final state = context.watch<AuthState>();
if (state.userModel == null) {
return ConstrainedBox(
constraints: BoxConstraints(minWidth: 200, minHeight: 100),
child: Center(
child: Text(
'Login to continue',
style: TextStyles.onPrimaryTitleText,
),
),
).ripple(() {
_logOut();
// Navigator.of(context).pushNamed('/signIn');
});
} else {
return Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 120,
width: 120,
margin: EdgeInsets.only(left: 17, top: 10),
decoration: BoxDecoration(
border: Border.all(color: kPrimaryColor, width: 2),
borderRadius: BorderRadius.circular(200),
image: DecorationImage(
image: customAdvanceNetworkImage(
state.userModel.profilePic ?? Constants.dummyProfilePic,
),
fit: BoxFit.cover,
)),
),
SizedBox(
height: 20,
),
ListTile(
onTap: () {
Navigator.push(context,
ProfilePage.getRoute(profileId: state.userModel.userId));
},
title: Row(
children: <Widget>[
UrlText(
text: state.userModel.displayName ?? "",
style: TextStyles.onPrimaryTitleText
.copyWith(color: Colors.black, fontSize: 20),
),
SizedBox(
width: 3,
),
state.userModel.isVerified ?? false
? customIcon(context,
icon: AppIcon.blueTick,
istwitterIcon: true,
iconColor: AppColor.primary,
size: 18,
paddingIcon: 3)
: SizedBox(
width: 0,
),
],
),
subtitle: customText(
state.userModel.userName,
style: TextStyles.onPrimarySubTitleText
.copyWith(color: Colors.black54, fontSize: 15),
),
trailing: customIcon(context,
icon: AppIcon.arrowDown,
iconColor: AppColor.primary,
paddingIcon: 20),
),
Container(
alignment: Alignment.center,
child: Row(
children: <Widget>[
SizedBox(
width: 17,
),
_tappbleText(context, '${state.userModel.getFollower}',
' Connections', 'FollowerListPage'),
SizedBox(width: 10),
_tappbleText(context, '${state.userModel.getFollowing}',
' Mentors', 'FollowingListPage'),
],
),
),
],
),
);
}
}
Widget _tappbleText(
BuildContext context, String count, String text, String navigateTo) {
return InkWell(
onTap: () {
var authstate = context.read<AuthState>();
List<String> usersList;
authstate.getProfileUser();
Navigator.pop(context);
switch (navigateTo) {
case "FollowerListPage":
usersList = authstate.userModel.followersList;
break;
case "FollowingListPage":
usersList = authstate.userModel.followingList;
break;
default:
}
Navigator.push(
context,
FollowerListPage.getRoute(
profile: authstate.userModel, userList: usersList));
},
child: Row(
children: <Widget>[
customText(
'$count ',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17),
),
customText(
'$text',
style: TextStyle(color: AppColor.darkGrey, fontSize: 17),
),
],
),
);
}
ListTile _menuListRowButton(String title,
{Function onPressed, IconData icon, bool isEnable = false}) {
return ListTile(
onTap: () {
if (onPressed != null) {
onPressed();
}
},
leading: icon == null
? null
: Padding(
padding: EdgeInsets.only(top: 5),
child: customIcon(
context,
icon: icon,
size: 25,
iconColor: isEnable ? AppColor.darkGrey : AppColor.lightGrey,
),
),
title: customText(
title,
style: TextStyle(
fontSize: 20,
color: isEnable ? AppColor.secondary : AppColor.lightGrey,
),
),
);
}
Positioned _footer() {
return Positioned(
bottom: 0,
right: 0,
left: 0,
child: Column(
children: <Widget>[
Divider(height: 0),
Row(
children: <Widget>[
TextButton(
onPressed: () {
Navigator.push(
context,
ScanScreen.getRoute(
context.read<AuthState>().profileUserModel));
},
child: Image.asset(
"assets/images/qr.png",
height: 25,
),
),
],
),
],
),
);
}
void _logOut() {
final state = Provider.of<AuthState>(context, listen: false);
Navigator.pop(context);
state.logoutCallback();
}
// ignore: unused_element
void _navigateTo(String path) {
Navigator.pop(context);
Navigator.of(context).pushNamed('/$path');
}
#override
Widget build(BuildContext context) {
return Center(
child: SafeArea(
child: Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 45),
child: ListView(
physics: BouncingScrollPhysics(),
children: <Widget>[
Container(
child: _menuHeader(),
),
Divider(),
_menuListRowButton('Profile',
icon: AppIcon.profiles, isEnable: true, onPressed: () {
var state = context.read<AuthState>();
Navigator.push(
context, ProfilePage.getRoute(profileId: state.userId));
}),
_menuListRowButton('Help Center',
icon: AppIcon.helped, isEnable: true, onPressed: () {
var state = context.read<AuthState>();
Navigator.push(
context, ProfilePage.getRoute(profileId: state.userId));
}),
_menuListRowButton('Terms of Service',
icon: AppIcon.agreement, isEnable: true, onPressed: () {
var state = context.read<AuthState>();
Navigator.push(
context, ProfilePage.getRoute(profileId: state.userId));
}),
_menuListRowButton('Privacy Policy',
icon: AppIcon.privacy, isEnable: true, onPressed: () {
var state = context.read<AuthState>();
Navigator.push(
context, ProfilePage.getRoute(profileId: state.userId));
}),
_menuListRowButton('Cookie Use',
icon: AppIcon.cookies, isEnable: true, onPressed: () {
var state = context.read<AuthState>();
Navigator.push(
context, ProfilePage.getRoute(profileId: state.userId));
}),
Divider(),
_menuListRowButton('Logout',
icon: AppIcon.logout, onPressed: _logOut, isEnable: true),
],
),
),
_footer()
],
),
),
);
}
}
I want them to open to different urls on the web. If there is anything I should add such as dependencies or import any packages, please let me know.

Answer 1

You can navigate to a webpage with the Url Launcher package.
Future<void> launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}