Make container clickable - flutter

I want to make the whole row clickable, but the print will only show if I tap Text or Icon.
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
child: Container(
width: double.infinity,
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
decoration: BoxDecoration(
border: Border.all(width: 0.5),
borderRadius: BorderRadius.all(Radius.circular(15.0))),
child: GestureDetector(
onTap: () {
print('click');
},
child: Row(
children: <Widget>[
Padding(
child: Text(
Localization.of(context).location,
style: TextStyle(fontSize: 18),
),
padding: EdgeInsets.only(left: 10.0),
),
Spacer(),
Padding(
child: Container(
child: Icon(Icons.locations),
height: 25.0,
),
padding: EdgeInsets.only(right: 15.0),
)
],
),
)))

#John Joe, I think the simplest way to make a Container clickable is by using InkWell as,
InkWell(
child: Container(
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(width: 1.0, color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(5.0))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Locations', style: TextStyle(color: Colors.grey)),
Icon(Icons.edit_location, color: Colors.grey)
])),
onTap: () {
setState(() {
text = 'Locations Tapped!';
});
},
)

Try this:
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
child: GestureDetector(
onTap: () {
print('click');
},
child: Container(
width: double.infinity,
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
decoration: BoxDecoration(border: Border.all(width: 0.5), borderRadius: BorderRadius.all(Radius.circular(15.0))),
child: Row(
children: <Widget>[
Padding(
child: Text(
Localization.of(context).location,
style: TextStyle(fontSize: 18),
),
padding: EdgeInsets.only(left: 10.0),
),
Spacer(),
Padding(
child: Container(
child: Icon(Icons.locations),
height: 25.0,
),
padding: EdgeInsets.only(right: 15.0),
)
],
),
),
),
);

Enclose the Widget (probably the Padding widget from your code snippet) , in GestureDetector. Basically, move GestureDetector from the current level to the Widget for which you want the tap to be detected.

Related

A RenderFlex overflowed by 330 pixels on the right

Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
height: 100,
width: MediaQuery.of(context).size.width * 1,
color: const Color(0xFF722a8c),
child: ListView(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"COLORS ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 28),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.check,
color: Colors.white,
),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: const Color(0xFFf44136),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: const Color(0xFF2295f6),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Color(0xFF4daf52),
borderRadius: BorderRadius.circular(20),
),
),
],
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"CLEAR ALL ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 50),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.white, width: 3),
),
child: const Icon(
Icons.clear,
color: Colors.white,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"ERASER",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 60),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Image.asset(
'assets/icon.png',
color: Colors.white,
),
),
),
]),
)
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"UNDO ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.undo,
color: Colors.white,
size: 45,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"REDO ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 100),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const Padding(
padding: EdgeInsets.only(left: 50),
child: Icon(
Icons.redo,
color: Colors.white,
size: 50,
),
),
),
),
]),
)
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"SAVE",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.white, width: 3),
),
child: const Icon(
Icons.check,
color: Colors.white,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 30),
child: Text(
"DO NOT SAVE",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(
left: 28,
),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(
right: 10,
),
child: Container(
child: const Text(
"Cancel",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
)),
),
]),
)
]),
]),
],
)),
);
As for inner row's children, there will different screen-size devices. While you've used Row you can make it horizontal scrollable by wrapping Row with a scrollable widget like ListView. For theses few buttons, we can use SingleChildScrollView
body: Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: const Color(0xFF722a8c),
child: ListView(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal, ///make sure to use horizontal
child: Row(children: [
Column(
Also you can try Wrap, or ListView (+with builder) widgets.

automatic height of the container in the flutter

I wrote a page, at the top everything is fine, as it should be. And at the bottom I have a history of events. The width of my container is determined automatically (depending on the width of the screen), and the height - no, on different devices different heights (indents at the bottom are different). Is it possible to determine the height automatically (to the end of the screen) ?? Also, I'd like to add a scroll bar at the bottom for this container so that when events appear there, I can scroll through them both bottom and top. I will be grateful for your help.
My page:
My code:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color:Colors.white12
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('yes',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('no',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
)
],
),
SizedBox(height: 15.0),
Container(
child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0,color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
Container(
child: Text("weight", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
padding: EdgeInsets.only(top: 2, bottom:40, left:0, right:0),
),
Center(
child: Container(
alignment: Alignment.center,
width: double.infinity,
height: 430,
decoration: BoxDecoration(
border: Border.all(
width: 1.5
),
borderRadius: BorderRadius.circular(25)
),
child: new Column(
children: [
Container(
child: Text("history events", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)
),
],
),
)//Container
)
]
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_scanQR();
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}
My scrin (after updating the code)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('yes', textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('no', textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
)
],
),
SizedBox(height: 15.0),
Container(
child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0, color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
Container(
child: Text("weight", style: TextStyle(fontSize: 20.0, color: Colors.blueGrey)),
padding: EdgeInsets.only(top: 2, bottom: 40, left: 0, right: 0),
),
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(7, 0, 7, 7),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(border: Border.all(width: 1.5), borderRadius: BorderRadius.circular(25)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 45,
child: Text("history events", style: TextStyle(fontSize: 25.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
Expanded(
child: Scrollbar(
child: new ListView(
shrinkWrap: true,
children: [
Container(
child: Text("Event 1", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 200,
),
Container(
child: Text("Event 2", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 200,
),
Container(
child: Text("Event 3", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 50,
),
],
))),
],
))))
]),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
// _scanQR();
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}
You can alter the responsive height or width by using Media Query .To do that you need to wrap your Scaffold with Material App or Cupetino App which allows you to use MediaQuery .
void main() {
runApp(MaterialApp(home: MyApp()));
}
To make the list scrollable simply you can use ListView.builder
Center(
child: Container(
margin: new EdgeInsets.only(bottom: 20,right: 15,left: 15),
alignment: Alignment.center,
width: double.infinity,
height: MediaQuery.of(context).size.height/1.5,
decoration: BoxDecoration(
border: Border.all(width: 1.5),
borderRadius: BorderRadius.circular(25)),
child: new Column(
children: [
Container(
child: Text("history events",
style: TextStyle(
fontSize: 20.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
],
),
) //Container
)
I added a little margin to make it looks better.Ofcourse you can also use MediaQuery for margin or padding if you want to.
https://i.stack.imgur.com/W6oXd.png

How to change the rotation and scale of a text container by dragging in Flutter?

I'm creating a Flutter app in which you can add text on images.
How can I change the rotation and scale of the text container by dragging their corresponding buttons?
here is the text container's image
and here is the text container's code:
Stack(
children: [
Positioned(
top: 0,
left: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(MdiIcons.close, size: 18),
),
),
),
Positioned(
top: 0,
right: 0,
child: GestureDetector(
onPanUpdate: widget.onRotateButtonPanUpdate,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(MdiIcons.rotateRight, size: 18),
),
),
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(MdiIcons.arrowExpand, size: 18),
),
),
),
Padding(
padding: const EdgeInsets.all(23.0),
child: Container(
padding: EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
),
child: Text("Some Text"),
),
),
],
),

Cupertino Sliverapp bar not scrolling

Hello guys i am working in this Platform specific flutter application and wanted have sliver like the gif listed bellow i was able to achieve part of it but the search bar is not moving with scrolling.Please help.
Widget _buildContent(context, productBloc, isIOS) {
return CustomScrollView(slivers: <Widget>\[
CupertinoSliverNavigationBar(
border: null,
backgroundColor: Colors.grey\[50\],
leading: Padding(
padding: const EdgeInsets.only(bottom: 16, left: 10),
child: Transform.scale(
scale: 4.5,
child: Image.asset('assets/images/whitelogo.png'),
),
),
largeTitle: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: \[
SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: CupertinoTextField(
placeholderStyle: TextStyle(color: Colors.grey\[300\]),
placeholder: 'Enter Product Name',
prefix: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
FrinoIcons.f_search_2,
size: 20,
),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey\[300\]),
borderRadius: BorderRadius.circular(5),
color: Colors.white,
),
),
),
),
\],
),
trailing: GestureDetector(
child: const Icon(
FrinoIcons.f_cart,
color: const Color(0xFFf79B34),
size: 28,
),
onTap: () => Navigator.of(context).pushNamed('/cart'),
),
)]
Try replacing CustomScrollView with NestedScrollView:
Widget _buildContent(context, productBloc, isIOS) {
return NestedScrollView(slivers: <Widget>\[
CupertinoSliverNavigationBar(
border: null,
backgroundColor: Colors.grey\[50\],
leading: Padding(
padding: const EdgeInsets.only(bottom: 16, left: 10),
child: Transform.scale(
scale: 4.5,
child: Image.asset('assets/images/whitelogo.png'),
),
),
}
}

how to resolved the text over flow

I am trying to retrieve data from database ..in question contain 128 word which is showing me overflow by 533 pl...how can i resolved that ..below is my code
#
text code
Padding(
padding: EdgeInsets.only(top: 2.0,),
child:Text(questonnd.question,textAlign: TextAlign.justify,overflow: TextOverflow.fade, style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueGrey,),),
),
my full code
new GestureDetector(
child: new Card(
elevation: 2.0,
margin: const EdgeInsets.all(5.0),
child:
new Stack(
alignment: Alignment.center,
children: <Widget>[
new Align(
child: new Row(
children: <Widget>[
Column(
children: <Widget>[
Text(questonnd.rate.toString()),
Stack(
children: <Widget>[
Padding(padding: EdgeInsets.all(6.0),
child: new Container(
child: Center(
child: Text("${questonnd.comment}"),
),
width: 20.0,
height: 20.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new AssetImage("assets/comment.png")),
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
),)
//
],
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 2.0,),
child:Text(questonnd.question,textAlign: TextAlign.justify,overflow: TextOverflow.fade, style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueGrey,),),
),
Row(
children: <Widget>[
questonnd.releventTag!=null?new Container(
decoration: new BoxDecoration(
color: Colors.greenAccent,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(6.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag,style: TextStyle(color: Colors.white),),),
):questonnd.releventTag2!=null?new Container(
decoration: new BoxDecoration(
color: Colors.black54,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(2.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag2,style: TextStyle(color: Colors.white),),),
):questonnd.releventTag3!=null?new Container(
decoration: new BoxDecoration(
color: Colors.black54,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(2.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag3,style: TextStyle(color: Colors.white),),),
):new Container(),
questonnd.releventTag4!=null?Row(
children: <Widget>[
Icon(Icons.message),
Text(questonnd.releventTag4.toString())
],
):new Container()
],
),
questonnd.releventTag5!=null?Padding(padding: EdgeInsets.all(2.0),
child: Row(
children: <Widget>[
Icon(Icons.remove_red_eye),
Text(questonnd.releventTag5.toString())
],
),):new Container()
],
)
],
),
alignment: Alignment.bottomCenter,
),
],
),
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>new Fullscreenquestion(questionNd: questonnd,)));
},
);
}
}
You should try wrapping your child into a Container with a fixed width. It happened to me here: Flutter- wrapping text and while it requires some workaround to set width in a platform-independent way it also works.