I have a list view with horizontal scroll and i have added CupertinoContextMenu to the image.
everything is works fine but the action buttons are not aligned center.
I have added the code. I tried with wrap scaffold too. same issue still.
I have to align the action buttons under the image center posisiton.
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Center(child: _invoiceImageSlider()),
);
// Image Slider List
Widget _invoiceImageSlider(){
return Container(
height: 250,
padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
child: ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
],
),
);
}
Widget _invoiceContextMenu(){
return Container(
child: CupertinoContextMenu(
child: Container(
child: _invoiceImage(),
),
previewBuilder: (BuildContext context, Animation<double> animation, Widget child) {
return FittedBox(
fit: BoxFit.cover,
child: ClipRRect(
borderRadius: BorderRadius.circular(64.0 * animation.value),
child: Image.asset('assets/invoices/'+_invoiceInfo.filename),
),
);
},
actions: <Widget>[
CupertinoContextMenuAction(
child: Row(
children: <Widget>[
Icon(
Feather.trash_2,
size: 25,
color: Colors.red,
),
SizedBox(width: 10),
Text("Delete")
]
),
onPressed: () {
Navigator.pop(context);
},
),
],
),
);
}
You can do so by centering the whole ContextMenu like this:
Align(
alignment: Alignment.center,
child: CupertinoContextMenu(),
)
Hope this helped. Cheers
Related
In my layout I have two Widgets in a row, a text and a button.
How can I achieve something like below, where only the Text is centered, and the icon is simply next to it?
---------------------------
Text *
---------------------------
Using Row would center all the contents and would output something like
---------------------------
Text *
---------------------------
Tried: Row(children:[widget1, widget2], mainAxisAlignment: MainAxisAlignment.center);
But this centers both items, causing the text to look off-centered.
You can use CompositedTransformTarget and CompositedTransformFollower as mentioned on comment section by pskink.
class AppPT extends StatelessWidget {
const AppPT({super.key});
#override
Widget build(BuildContext context) {
final LayerLink _layerLink = LayerLink();
return Scaffold(
body: Column(
children: [
Stack(
children: [
Align(
child: CompositedTransformTarget(
link: _layerLink,
child: Container(
color: Colors.red,
width: 100,
height: 60,
alignment: Alignment.center,
child: Text("btn"),
),
),
),
CompositedTransformFollower(
link: _layerLink,
targetAnchor: Alignment.centerRight,
followerAnchor: Alignment.centerLeft,
child: Container(
color: Colors.cyanAccent,
width: 12,
height: 12,
alignment: Alignment.center,
child: Text("*"),
),
),
],
)
],
),
);
}
}
There are few tricks I can think of,
You can use Stack widget with Position.
including another widget on right by applying opacity(invisible) on current snippet.
using transform will be handle if you know the width of the widget.
Transform.translate(
offset: Offset(20 / 2, 0), //20 is the * box size
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
width: 100,
height: 60,
alignment: Alignment.center,
child: Text("btn"),
),
Container(
color: Colors.green,
width: 20,
height: 20,
child: Center(child: Text("*")),
),
],
),
),
Place text and second widget inside row then put the row inside container with alignment center and use SizedBox for spacing between widget instead of Padding Widget.
Container(
color: Colors.green,
alignment: Alignment.center,
height: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Text("Text"),
SizedBox(width: 10),
Text("*"),
],
),
);
Does anyone know how to make my stepper scrollable in vertically, it actually could scroll but it doesn't scrolling till the end of the page length
The stepper:
MainScaffold(
title: appBarTitle,
body: Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
width: width,
child: Column(
children: <Widget>[
const SizedBox(
height: 8,
),
Row(
children: _lineViews(),
),
const SizedBox(
height: 8,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _titleViews(),
),
const SizedBox(
height: 20,
),
Expanded(
child: ListView(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: stepPanels())
],
),
),
const SizedBox(
height: 20,
),
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: _buttonControls(currentStep, context),
);
I put the stepper's content inside expanded listview, and I already add shrinkwrap & physics into it, when I call this customizable widget on another class, it can't be scrolled till the end of the page
Steps(
content: Obx(
() {
if (controller.loading.value) {
return const LoadingProgressIndicator();
} else {
return SizedBox(
height: MediaQuery.of(context).size.height,
child: ListView(
physics: const ClampingScrollPhysics(),
children: [
controller.loading.value
? const LoadingProgressIndicator()
: _doctorProfile(),
const SizedBox(height: 10.0),
const ClinicTypeToggle(),
const SizedBox(height: 100.0),
],
),
);
}
},
),
),
that is the content that I want to scroll
I want to have a container with a flexible body (red) height and a fixed button height (gray).
The complete container should be as small as possible and have a max height.
If the content is overflowing the max height it should be scrollable.
I'm new to flutter, so I have no idea how to achieve this.
I tried it with a ConstraintBox with maxHeight, but then the whole container is bigger then it have to be, when the content is small.
return Container(
child: Column(
children: [
ConstrainedBox(
maxHeight: 400
child: //SomeWidget that could overflow
),
Container(
height: 150,
child: Center(
child: TextButton(child: Text('OK'))
),
)
],
),
);
Can someone help?
You can set constraints of your Container. Also you can use Flexible and SingleChildScrollView
Container(
constraints: BoxConstraints(
maxHeight: 300,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: Column(
children: [
//SomeWidget that could overflow
],
),
)),
Container(
color: Colors.amber,
height: 150,
child:
Center(child: TextButton(onPressed: () {}, child: Text('OK'))),
)
],
),
)
I've achieved it now, with that code:
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: //SomeWidget that could overflow
),
),
Container(
alignment: Alignment.bottomCenter,
child: TextButton(
child: Text('OK')
)
)
]
)
)
According to your UI i think this one will be perfect, and let me know if you need any changes. use constraints to change size.
final widgets = List.generate(
12,
(index) => Container(
height: 100,
color: index % 2 == 0 ? Colors.cyanAccent : Colors.greenAccent,
child: Text("item $index"),
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: SizedBox(
///* used 90% of screen for items
height: constraints.maxHeight * .9,
child: ListView(
children: [
Center(child: Text("inside listView")),
///your widgets
...widgets,
Center(child: Text("End of listView")),
],
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
color: Colors.grey.withOpacity(.3),
///* used 10% of screen for Button
height: constraints.maxHeight * .1,
child: Center(
child: TextButton(
child: Text('OK'),
onPressed: () {},
),
),
),
),
],
),
),
);
}
I am using the below code, where I have a ListView that had a switch.
I want to implement something like when I click on the RaisedButton - it will reload the ListView and all the values of switch.value should be changed to either true or false.
The user can either change the value of the switch from items in the ListView or from the button click.
I do not have an idea on how I should change the value or all the switches in the ListView.
return Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 2,
height: 100,
padding: EdgeInsets.all(20),
child: RaisedButton(
onPressed: () {
},
child: Text(
BTN_START_TRIP,
style: new TextStyle(
fontSize: 20.0,
),
),
textColor: buttonFontColor,
color: buttonColor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(15.0))
),
),
Expanded(
child: ListView.builder(
padding: EdgeInsets.all(3.0),
// Let the ListView know how many items it needs to build.
itemCount: snapshot.data.results.length,
// Provide a builder function. This is where the magic happens.
// Convert each item into a widget based on the type of item it is.
itemBuilder: (context, index){
return Container(
height: 120,
child: Card(
elevation: 10,
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print(snapshot.data.results[index].original_title);
},
child: Container(
height: 120,
child: Row(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(20, 0, 5, 0),
width: MediaQuery.of(context).size.width -90,
child: Align(
alignment: Alignment.topLeft,
child: Text(snapshot.data.results[index].original_title,
textAlign: TextAlign.left,
style: TextStyle(fontSize: defaultTitleFontsize, color: defaultFontColor),
maxLines: 5),
),
),
Container(
padding: EdgeInsets.fromLTRB(20, 0, 5, 0),
child: Align(
alignment: Alignment.topLeft,
child: Text(snapshot.data.results[index].original_language,textAlign: TextAlign.left,style: TextStyle(fontSize: defaultsubTitleFontsize, color: defaultFontColor)),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
child: Switch(
value: false,
onChanged: (value){
setState(() {
print(value);
});
}
),
),
],
),
]
),
),
),
),
);
},
),
)
],
);
You'll need to have a variable to decide if the switch should be on or off. And during a certain event (click of button e.g) set the variable to appropriate value & re-trigger the build (re-painting of the UI) by calling setState. You'll need to have the above logic part of a stateful widget to accomplish that.
I am tring to create ui as below image. but button hide behind the list. Also faces issue button not click when used Positioned widget for button.Please suggest how to create below UI using Stack widget with ListView & Floating button.
UI
Container(
color: Colors.grey,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 250.0,
width: MediaQuery.of(context).size.width,
child: Image.asset(
"images/1.jpg",
fit: BoxFit.cover,
),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
height: 220.0,
),
Container(
padding: EdgeInsets.only(right: 15.0),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.favorite),
),
),
],
),
Column(
children: <Widget>[
Container(
height: 250.0,
),
Container(
height: MediaQuery.of(context).size.height - 250.0,
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text("Title $index"),
leading: Icon(Icons.home),
),
);
},
itemCount: 15,
),
),
],
)
],
),
],
),
);
As per documentation (https://docs.flutter.io/flutter/widgets/Stack-class.html):
The stack paints its children in order with the first child being at the bottom
So your Stack children's order is wrong. Your current order is:
Header
Button
List
But it should be:
Header
List
Button
Otherwise list is overlapping button.