Develop Reference

how to do it ?-> Among the two checkboxes in a row, the user can select only one checkbox at a time

in flutter -> Among the two checkboxes in a row, the user can select only one checkbox at a time. how can i do it.here i have use ("RoundCheckBoxCus" because i need this type of round checkbox with icon) checkbox package. ...from my code user can select 2checkbox at a time, but i need only one can select at a time.in a row.
please check my code->
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(352),
left: MediaQuery.of(context).size.width * 0.72),
child: Row(
children: <Widget>[
// SizedBox(
// height: 540.h,
// ),
SizedBox(
width: 13.w,
),
Container(
child: RoundCheckBoxCus(
onTap: (selected) => print(selected),
uncheckedColor: Colors.transparent,
uncheckedWidget: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.transparent,
),
borderRadius: BorderRadius.all(Radius.circular(20.sp))
),
child: Icon(Icons.check,size:15.sp,),
),
size: 19.w,
),
),
SizedBox(width: 30.w,),
Container(
child: RoundCheckBoxCus(
onTap: (selected) => {
setState(() {
isChecked = true;
},
)},
uncheckedColor: Colors.transparent,
uncheckedWidget: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.transparent,
),
borderRadius: BorderRadius.all(Radius.circular(20.sp))
),
child: Icon(Icons.check,size:15.sp,),
),
size: 19.w,
),
),
SizedBox(
width: 13.w,
),
],
),
),

That's called a radio button. You should make the interface conform to the expected look of such, by following the advice at https://material.io/components/radio-buttons. There's a link to the specific Flutter code that you'll need there as well.

How to make parent only CLICKABLE?

what I want to achieve is to make the parent only clickable not the child of the parent.
Suppose, there is a clickable container with the size of 400x400, and the child of that container is another container with the size of 200x200.
Now if we touch the second container(smaller one), it is also clickable. How can I prevent the small container from getting clicked?
I have tried almost everything but I may don't have that good skills at flutter, please help.
Code:
InkWell(onTap: (){print('Container Clicked');},child:
Container(height: 400, width: 400, color: Colors.blue,
child: Center(child: Container(height: 200,width: 200, color: Colors.green,)),),)

try this
InkWell(
onTap: (){
print('Container Clicked');
},
child: Container(
height: 400,
width: 400,
color: Colors.blue,
child: Center(
child: GestureDetector(
onTap: () {}, /// <-- locked inkwell tap
child: Container(
height: 200,
width: 200,
color: Colors.green,)
),
),
),
)

I hope I got your question right. This is the code if you want to make only the bigger container clickable,
Stack(
children:[
InkWell(
onTap: (){
print('Container Clicked');
},
child: Container(
height: 400, width: 400,
color: Colors.blue,
),
),
Center(
child: Container(
height: 200,width: 200,
color: Colors.green,
),
),
],
),

How to make an icon rest on the edge of container flutter

How do I make an icon rest on the bottom of a container, just like in the picture. So that even when I scroll the page and the container moves. The icon moves with it in that particular position.
The icon in this page is the empty profile icon resting on the container with the exes image. I don't want my container to have an image though.
Just color image of the container and round icon.
Image of the container and icon even when scrolled.
NOTE. I don't want the container to be the app bar. Just a container on its own under the app bar. I'm only showing this picture so u can see what I'm talking about.

did you try this
Align(
alignment: Alignment.topCenter,)

Did you want it like this :
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 300,
color: Colors.cyan[900],
),
Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.topCenter,
children: [
Container(
width: double.infinity,
color: Colors.grey[900],
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 150, // +50 below circle Container
),
const Text(
'Happiness',
style: TextStyle(color: Colors.white, fontSize: 32),
),
const SizedBox(
height: 30,
),
Container(
height: 200,
width: 300,
color: Colors.amber[900],
),
const SizedBox(
height: 30,
),
Container(
height: 200,
width: 300,
color: Colors.red[900],
),
],
),
),
Positioned(
top: -100,
child: Container(
height: 200,
width: 200,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
'assets/images/cyanide.png',
)),
color: Colors.deepPurple,
),
),
),
],
),
],
),
),

may be what you need is to use CustomScrollView and SilverAppBar with bottom:
here is the reference: example
plus transform

Increase width of two text buttons to fill space of sizedbox [duplicate]

This question already has answers here:
Flutter: How to make a button expand to the size of its parent?
(8 answers)
Closed 1 year ago.
i am trying to increase the width of the two text buttons to fill up the space of the sizedbox at the very top. I like their position centered as they are i just want to increase their width.
Positioned(
top: 350,
left: 35,
child: SizedBox(
width: width / 1.2,
height: height / 3,
sizedbox that i want to increase the buttons width to.
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
color: Colors.grey[850],
child: Column(
children: [
SizedBox(
height: 90,
),
SizedBox(
height: 10,
),
textbutton 1 to increase width, placed above the other textbutton
TextButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
kcPrimaryColor),
foregroundColor: MaterialStateProperty.all<Color>(
Colors.white)),
onPressed: () {},
child: Text("Upload Picture"),
),
textbutton 2 i would like to increase width of
TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MusicPreferences()),
);
},
child: Text("I will do it later"),
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
Colors.transparent),
foregroundColor: MaterialStateProperty.all<Color>(
kcPrimaryColor)),
),
],
),
),
),
),
),
This is just an extra sized box for design purposes with a picture, no need to change.
Positioned(
top: 290,
left: 140,
child: SizedBox(
width: 150,
height: 150,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Container(
color: Colors.grey[850],
),
)),
),
Positioned(
top: 280,
left: 165,
child: SizedBox(
width: 100,
height: 150,
child: CircleAvatar(
backgroundImage:
AssetImage("lib/assets/images/randomface.jpg"),
),
),
),

I wrapped both buttons with expanded and then wrapped that with a row to increase the width. That solved the issue

Borderless selection highlight effect in Flutter

Context: I'm rewriting my Android app with Flutter. On Android, there was this interesting touch feedback effect when setting clickable View's background property to ?android:selectableItemBackgroundBorderless:
Note that the red border wasn't in the real UI, it's there just to show View's borders. As you can see, the ink forms a circle that is circumscribed around the rectangular view.
I would like the ink in my Flutter app to be also circumscribed around the view, i.e. the selection area needs to be circular and to encompass the view. I'm trying to achieve this by using InkResponse component, but the result looks miserable:
The body of the Scaffold used in the example:
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Material(
color: Color(0xff008080),
child: Center(
child: InkResponse(
onTap: () {
/* ... */
},
child: Container(
child: Center(
child: Text('BUTTON'),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
width: 200.0,
height: 200.0,
),
highlightColor: Colors.transparent,
),
),
),
),
If I make the radius property of the InkResponse big enough, it can go beyond the view's bounds, and if my view had static size, I could tweak the property to achieve the desired effect, but in my real app it's dynamic.
Is it possible to do it without making a custom component?

For these purposes, I think InkResponse should be used:
Container(
width: 80,
height: 80,
child: InkResponse(radius: 110, onTap: () {}, child: Text("text")));
Working Example

Have you tried this, its click is bound into the red area.
Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Material(
color: Color(0xff008080),
child: Center(
child: InkWell(
onTap: () {
/* ... */
},
child: Container(
child: Center(
child: Text('BUTTON'),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
),
highlightColor: Colors.transparent,
),
),
),
),