I'm having trouble in figuring out how to fix a floating button in the right place.
I've tried several things, but without success.
This is how It's currenlty looking.
and the code
Widget myButtonTest(MediaQueryData mediaQuery){
Widget child;
if (widget.button == "video"){
return Column(
children: <Widget>[
Center(
child: Padding(
padding: const EdgeInsets.only(top: 80.0),
child: ClipPath(
child: Container(
child:AspectRatio(
aspectRatio: 1,
child: VideoPlayer(_controller),
)
),
clipper: BottomWaveClipper(),
))),
FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child:Icon(
Icons.play_arrow,
color: Colors.red,
size: 32.0,
),
backgroundColor: Colors.white,
),
]
);
}
return Container(child: child);
}
And this is where I want the button.
Try wrapping the floating action button with padding, and having the padding be:
padding: const EdgeInsets.fromLTRB(0,0,0,100),
Also make sure the padding is on the Floating action button like this:
Padding(
padding: const EdgeInsets.fromLTRB(0,0,0,100),
child: FloatingActionButton(
Related
I want to implement the OnTap in the Gesture Detector, i just cant figure out how... Originally i had the OnTap in the Inkwell, but it didnt work, since it didnt "entered" to that function according to Debugger, so i wanted to try out if a Gesture Detector could help...
Widget _buildCardDeck() {
return Container(
child: Row(
children: <Widget>[
InkWell(
child: cardDeckClosed.isNotEmpty
? Padding(
padding: const EdgeInsets.all(2.0),
child: TransformedCard(
playingCard: cardDeckClosed.last, attachedCards: [], columnIndex: 0,
),
)
: Opacity(
opacity: 1.0,
child: Center(
widthFactor: 5.0,
heightFactor: 7.0,
child: GestureDetector(
child: Container(
padding: const EdgeInsets.all(5.0),
color: Colors.white,
width: 70.5,
height: 100.0,
),
),
),
),
onTap: () {
setState(() {
if (cardDeckClosed.isEmpty) {
cardDeckClosed.addAll(cardDeckOpened.map((card) {
return card
..opened = false
..faceUp = false;
}));
cardDeckOpened.clear();
} else {
cardDeckOpened.add(
cardDeckClosed.removeLast()
..faceUp = true
..opened = true,
);
}
});
},
),
Try below code, In your above code you write your onTap:(){} function inside InkWell
Using GestureDetector
GestureDetector(
onTap: () {
print('Container Pressed');
},
child: Container(
alignment: Alignment.center,
color: Colors.blue,
height: 50,
width: 150,
child: Text('Ontap Using GestureDetector'),
),
),
Using InkWell
InkWell(
onTap: () {
print('Container Pressed');
},
child: Container(
alignment: Alignment.center,
color: Colors.blue,
height: 50,
width: 150,
child: Text('Ontap Using InkWell'),
),
),
it's a pretty straight forward widget, this is a starter code that might help you:
GestureDetector(
onTap: (){
// this will fire when you tap
},
child: yourChildWidget(),
)
In my design, there is a close button in the BottomSheet. I have tried Stack. But it didn't work. Does anyone know how to achieve the result? Thanks :)
modalBottomSheet(context) {
return showModalBottomSheet(
context: context,
builder: (context) {
return Stack(
children: [
Container(
child: Text('Sample Text'),
),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
],
);
}
);
}
So I've been trying around for a bit, and this seems to work as you explained.
modalBottomSheet(context) {
return showModalBottomSheet(
context: context,
builder: (context) {
// using a scaffold helps to more easily position the FAB
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: double.maxFinite,
),
Padding(
padding: EdgeInsets.all(30.0),
child: Text("Text in the sheet"),
),
],
),
// translate the FAB up by 30
floatingActionButton: Container(
transform: Matrix4.translationValues(0.0, -30, 0.0), // translate up by 30
child: FloatingActionButton(
onPressed: () {
// do stuff
print('doing stuff');
},
child: Icon(Icons.add),
),
),
// dock it to the center top (from which it is translated)
floatingActionButtonLocation: FloatingActionButtonLocation.centerTop,
);
});
}
The meat of the solution here is to transform the Container which contains the FAB. I got this idea from this older SO answer to a somewhat related question.
The result looks like this:
You'll probably have to make some more edits to achieve the exact result you desire, but I hope this sets you on the right path.
Edit
When, in the above solution, you want to press the FAB, and you tap the top half, the onPressed handler fires, but the modal also closes. You should probably use a WillPopScope that only pops when the actual button is pressed (and not the area around/above it). If you think it's fine pressing anywhere above it as well, you can just leave it as-is.
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (BuildContext context) {
return Stack(clipBehavior: Clip.none, children: [
Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.vertical(top: Radius.circular(20))),
height: 220.h,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10.0, vertical: 16),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(
color: Colors.green,
onPressed: () {},
child: const Center(child: Text('Remove')))
],
),
),
),
),
Positioned(
top: -30.h,
right: 12.w,
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.close),
)),
]);
},
)
Hi I'm working on the Flutter project
I'm having an issue with the flutter ListView button, So right now it looks the same what I wanted but it doesn't work how I wanted
So if you see the above image if I click then tick overlay appears for that I need to setState() but the issue is right now to get that overlay tick I need to tap twice I don't understand how to fix this issue or is there any widget button which onclick overlay I checked most of them but most of them didn't work or I was not aware of? Inside container, I have 14 same columns with numbers 1-14 I'll make it more compact but first I need to fix this issue here is the code.
`bool _pressed = false;
int _btnIndex = 0;
TabBarView(children: <Widget>[
Container(
height: 300,
// padding: EdgeInsets.only(bottom: 10),
padding: EdgeInsets.all(10),
color: Colors.white,
child: ListView(
padding: EdgeInsets.all(6),
scrollDirection: Axis.horizontal,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Material(
elevation: 4.0,
shape: CircleBorder(),
clipBehavior: Clip.hardEdge,
color: !_pressed && _btnIndex == 1
? Colors.red
: Colors.white54,
child: Ink.image(
image: AssetImage('assets/images/colosseum.jpg'),
fit: BoxFit.cover,
colorFilter: _pressed && _btnIndex == 1
? ColorFilter.mode(
Colors.black87,
BlendMode.darken,
)
: null,
width: 60.0,
height: 60.0,
child: InkWell(
// splashColor: Colors.green,
focusColor: Colors.red,
highlightColor: Colors.white60,
// overlayColor: MaterialStateColor(),
child: _pressed && _btnIndex == 1
? Icon(
Icons.check,
color: Colors.white,
)
: null,
// onDoubleTap: () {
// _pressed = !_pressed;
// },
onTap: () {
setState(() {
_pressed = !_pressed;
_btnIndex = 1;
});
// _pressed = true;
print('I tapped no 1');
},
),
),
),
),
),
Container(
alignment: Alignment.center,
child: Text('10'),
),
],
),
]),
),
]);`
just use Listview.builder for this
and inside that use GestureDetector inside Builder to change selected item
first take a variable to track selected index
int selected;
then make a listView Builder Widget
ListView.builder(
itemCount:5,
scrollDirection: Axis.horizontal,
itemBuilder:(ctx,index){
return GestureDetector(
onTap:(){
selected = index;
setState((){});
}
child: YourWidget(isSelected:this.selected == index);
);
}
)
just write logic for displaying tick in YourWidget image when isSelected is true
Hey #user2572661 may be when you touch container may not interact as what you want you can use ListView.builder() with scroll direction horizontal also there is a Widget you can use it onTap: to change state or logic call GestureDetector(). Although can you please share some more code so that i can understand and rectify your problem.
I'm using animated container for getting toggle button like in android. Here my code is working for toggle button function perfectly. But what i need is, if i press some other button, toggle button should function. see the below image for your reference(if i press "Press" button it should operate toogle button). Thanks in advance.
https://i.stack.imgur.com/qJpWT.jpg
class DialogExample extends StatefulWidget {
#override
_DialogExampleState createState() => new _DialogExampleState();
}
class _DialogExampleState extends State<DialogExample> {
bool toggleValue = false;
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Column(
children: [
Padding(
padding: const EdgeInsets.only(top:180.0),
child: Center(
child: InkWell(
onTap: toggleButton,
child: AnimatedContainer(
duration: Duration(milliseconds: 100),
height: 40.0,
width: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: toggleValue ? Colors.deepOrangeAccent : Colors.grey.withOpacity(0.5),
),
child: Stack(
children: [
AnimatedPositioned(
duration: Duration(milliseconds: 300),
curve: Curves.easeIn,
left: toggleValue? 60.0 : 0.0,
right: toggleValue ? 0.0 : 60.0,
child: InkWell(
onTap: toggleButton,
child: AnimatedSwitcher(
duration: Duration(milliseconds: 100),
child: toggleValue ? Icon(Icons.check_circle,color: Colors.white,size: 39.0, key: UniqueKey(),)
: Icon(Icons.check_circle,color: Colors.white,size: 39.0,
key: UniqueKey(),),
),
),
)
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(top:80.0),
child: RaisedButton(
child: Text("press"),
onPressed: (){
toggleButton;
},
),
)
],
),
);
}
toggleButton() {
setState(() {
toggleValue = !toggleValue;
});
}
}
Replace your button code with the below code block. Actually you are calling toggle button inside a method, So, it is unable to recognition it.
Padding(
padding: const EdgeInsets.only(top:80.0),
child: RaisedButton(
child: Text("press"),
onPressed:toggleButton,
),
)
Just replace toggleButton with, because that is not valid statement here.
toggleButton();
I'm trying to create a Container with a curve on the middle top and put a Round Button inside the curve. It should look similar to the Curved Navigation Bar package from Flutter, however, just without the animation.
I've tried to work with Stack and Positioned, however, Flutter doesn't convert it how I imagine it to be.
class CurvedContainerWithButtonAtTopCenter extends StatelessWidget{
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Container(
height: 200.0,
child: Stack(
children: <Widget>[
Positioned(
top: 30.0,
right: 0.0,
left: 0.0,
child: Container(
height: 170.0,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 20.0, vertical:
40.0),
color: Colors.blue,
)),
Container(
height: 60.0,
width: 60.0,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle),
alignment: FractionalOffset.center,
child: Container(
margin: EdgeInsets.all(10.0),
child: FloatingActionButton(),
)
)
],
)
)
);
}
}
I would expect the Container to take the full width and be positioned a little bit lower. The Circle should be in the Center at the Top Border of the Container. The Circle should also contain a FloatingActionButton.
I hope you've found the answer by now, but just in case... bellow you can find a potential solution:
build function
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Hello'),
),
bottomNavigationBar: _navigationDrawer,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.orange,
child: Icon(Icons.add),
onPressed: () {}),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked);
}
getter for bottom navigation
Widget get _navigationDrawer {
return Container(
height: 80.0,
child: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
),
Padding(
padding: const EdgeInsets.only(left: 50),
child: IconButton(
icon: Icon(Icons.note_add),
onPressed: () {},
),
),
IconButton(
icon: Icon(Icons.portrait),
onPressed: () {},
),
],
)),
);
}
And the result
Hope this helps :) Happy coding !!!