flutter : How to make Card Radio Button? - flutter

Question

I want make card Radio Button.
I want make card Radio Button.I want make card Radio Button.
I want make card Radio Button.I want make card Radio Button.
I want make card Radio Button.
I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.
This is my code
import 'package:cwc/ui/Home/homePage.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class LandingPage extends StatefulWidget {
const LandingPage({Key? key}) : super(key: key);
#override
_LandingPageState createState() => _LandingPageState();
}
class _LandingPageState extends State<LandingPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.png"),
fit: BoxFit.cover,
),
),
width: double.infinity,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 80,
),
Text(
'Membership Packages',
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
'Choose a membership plan to unlock all the features of the CWC Wellness Resource App',
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 13,
),
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Container(
decoration: const BoxDecoration(
// borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: AssetImage("assets/ona.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 1.75,
color: Colors.transparent,
),
Image.asset(
'assets/onaa.png',
height: 114,
width: 114,
),
],
)),
),
),
const SizedBox(
height: 32,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/onb.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 1.75,
color: Colors.transparent,
),
Image.asset(
'assets/onbb.png',
height: 114,
width: 114,
),
],
)),
),
const SizedBox(
height: 32,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/onc.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 1.75,
color: Colors.transparent,
),
Image.asset(
'assets/oncc.png',
height: 114,
width: 114,
),
],
),
),
),
],
),
],
),
),
),
),
bottomNavigationBar: GestureDetector(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Container(
color: Color(0xff3a99a4),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60))),
width: double.infinity,
height: 57,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(27, 0, 0, 0),
child: Container(
width: 18,
height: 18,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Text(
'Continue',
style: GoogleFonts.poppins(
fontSize: 14,
color: Color(0xFF158998),
fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 27, 0),
child: const Icon(
Icons.arrow_right_alt_outlined,
size: 18,
color: Color(0xFF158998),
),
),
],
),
)))));
}
}
I Created this.
But I want like this.

Answer 1

To achieve that you need to wrap your widgets inside Stack widget and also have to assign position to each like below code below. Just replace you Column with this :
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: SizedBox(
height: 147,
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
bottom: 8,
top: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context)
.size
.width /
1.75,
color: Colors.transparent,
),
Image.network(
"https://cdn.pixabay.com/photo/2017/07/08/09/49/red-2483933_960_720.jpg",
height: 114,
width: 114,
),
],
)),
),
Positioned(
width: 18,
bottom: 0,
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Radio(
activeColor: Colors.green,
overlayColor: MaterialStateProperty.all(
Colors.red),
value: 1,
groupValue: 1,
onChanged: (int? value) {},
),
),
),
),
],
),
),
),
),
Divider(color: Colors.transparent,),
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: SizedBox(
height: 147,
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
bottom: 8,
top: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context)
.size
.width /
1.75,
color: Colors.transparent,
),
Image.network(
"https://cdn.pixabay.com/photo/2017/07/08/09/49/red-2483933_960_720.jpg",
height: 114,
width: 114,
),
],
)),
),
Positioned(
width: 18,
bottom: 0,
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Radio(
activeColor: Colors.green,
overlayColor: MaterialStateProperty.all(
Colors.red),
value: 1,
groupValue: 1,
onChanged: (int? value) {},
),
),
),
),
],
),
),
),
),
Divider(color: Colors.transparent,),
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: SizedBox(
height: 147,
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
bottom: 8,
top: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context)
.size
.width /
1.75,
color: Colors.transparent,
),
Image.network(
"https://cdn.pixabay.com/photo/2017/07/08/09/49/red-2483933_960_720.jpg",
height: 114,
width: 114,
),
],
)),
),
Positioned(
width: 18,
bottom: 0,
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Radio(
activeColor: Colors.green,
overlayColor: MaterialStateProperty.all(
Colors.red),
value: 1,
groupValue: 1,
onChanged: (int? value) {},
),
),
),
),
],
),
),
),
),
],
),