I am trying to have an ElevatedButton widget in this stateless widget. The hierarchy of the brackets is ok but it is not recognizing the ElevatedButton widget being a parameter of child
class buildProfileView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Center(
child: CircleAvatar(
backgroundImage:
Image.network(controller.googleAccount.value?.photoUrl ?? '')
.image,
radius: 100,
),
),
Text(
controller.googleAccount.value?.displayName ?? '',
style: Get.textTheme.headline1,
),
Text(controller.googleAccount.value?.email ?? '',
style: Get.textTheme.bodyText1),
//),
],
child: ElevatedButton(
onPressed: () {},
child: Text('Continue to Main Menu'),
backgroundColor: Colors.blue,
),
),
);
}
}
The issue lies on code-strucure
//),
],
child: ElevatedButton(
onPressed: () {},
where ElevatedButton is out of the column scope.
It will be
body: Column(mainAxisSize: MainAxisSize.min, children: [
Center(
child: CircleAvatar(
backgroundImage:
Image.network(controller.googleAccount.value?.photoUrl ?? '')
.image,
radius: 100,
),
),
Text(
controller.googleAccount.value?.displayName ?? '',
style: Get.textTheme.headline1,
),
Text(controller.googleAccount.value?.email ?? '',
style: Get.textTheme.bodyText1),
ElevatedButton(
onPressed: () {},
child: Text('Continue to Main Menu'),
),
]),
More about Column widget.
Yeah you can't assign both child and children property to a Column. Column takes children so move ElevatedButton to children block inside [](square brackets).
Related
Scroll single ListTile in ListView
class MainScreen extends MvcScreen<MainScreenController> {
#override
MainScreenController initController() => MainScreenController();
#override
Widget defaultScreenLayout(
ScreenParameters screenParameters, MainScreenController controller) {
return _tabsLayout;
}
Widget get _tabsLayout => DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text(AppScaffold().title),
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: () {}),
],
),
drawer: TelegramDrawer(),
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xff65a9e0),
child: Icon(Icons.create),
onPressed: () {},
),
body: _body,
),
);
Widget get _body => Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: _chatsListView),
],
).paddingAll(0);
Widget get _chatsListView => Container(
child:
ListView.builder(itemCount: 1, itemBuilder: channelListItemBuilder),
);
Widget channelListItemBuilder(context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blueGrey[200],
foregroundColor: Colors.white,
radius: 28,
child: Icon(
Icons.archive,
size: 30,
),
),
title: Text(
"Archived Chats",
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
),
);
}
Once you wrap ListView in the column it does not allow you to scroll view. Therefore here I've changed the code:
Widget get _body => Expanded(child:Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: _chatsListView),
],
).paddingAll(0));
I have a card and a container. Inside the card, I have a container and the conatiner has rows and columns. On the last column, I have a button that is overflown from the card.
Please check the image, I have too much logic in the code, that is why I am unable to share my complete code. That will be too hard for anyone to understand.
Here is my code:
Spacer(),
Container(
child: RaisedButton(
color: MyColors.primaryColor,
child: subonoff(subcatextraproduct[index]) && visbutton ? Text(" Get Once ",style: TextStyle(color: Colors.white,fontSize: 10)) : Text("+ Add to Cart",style: TextStyle(color: Colors.white,fontSize: 10)),
onPressed: (){
subtotal=subtotal+subcatextraproduct[index].price.round();
grandtotal=subtotal+deliverycharges;
setState(() {
//change="Once";
// print("sum setstate");
// sum++;
myfunc();
//this.widget.callback(sum);
});
makefalsbutton(subcatextraproduct[index].id);
maketruecountr(subcatextraproduct[index].id);
totalcsetone(subcatextraproduct[index].id);
// print("i am in add");
},
),
),
You should not use Container without any attributes but child and DO NOT use functions to make widgets
As for your question – try to wrap your button into Expanded
I'd recommend you to read this article https://flutter.dev/docs/development/ui/layout/constraints
Try this code:
class ProductRow extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Expanded(
child: Image.network(
'https://i.stack.imgur.com/vYOjL.png',
fit: BoxFit.contain,
),
),
Expanded(
child: Column(
children: [
Text('Yougurt'),
Text('1 kg'),
Text('9% OFF'),
Text('RS 110.0'),
],
),
),
RaisedButton.icon(
icon: const Icon(Icons.add),
label: const Text('Add to cart'),
onPressed: () {},
)
],
),
);
}
}
2 suggestions:
Remove container
If you can’t remove container, replace it with Flexible widget. Set fit: FlexFit.loose
Try
RaisedButton(
onPressed: ...,
child: FittedBox(
child: Text(
condition ? "Get Once" : "Add to cart",
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
)
Or
[
Spacer(),
Flexible(child: RaisedButton()),
...
]
I am trying to use Expand widget in Column so user can tap in any position of screen to increase counter, but there is an issue in alignment of text in crossAxisAlignment and mainAxisAlignment of the column it didn't apply on Expand widget as the following
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black12,
body: SafeArea(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
i++;
print(i);
});
},
child: Text(
i.toString(),
style: TextStyle(fontSize: 50.0, color: Colors.blueAccent),
textAlign: TextAlign.center,
),
),
),
],
),
),
),
),
);
You went with the wrong approach because you can't Center an Expanded because Expanded takes the entire available space inside Row or Column in your case Column with single Widget inside children the GestureDetector. Here is one of a solution for what you want to achieve
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black12,
body: SafeArea(
child: Center(
child: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: GestureDetector(
onTap: () {
setState(() => i++;);
},
),
),
],
),
Align(
alignment: Alignment.center,
child: Text(
'$i',
style: TextStyle(fontSize: 50.0, color: Colors.blueAccent),
),
),
],
),
),
),
);
}
another solution using FlatButton inside SizedBox.expand()
so you don't need to fight with a single child column.
class _MyAppState extends State<MyApp> {
int i = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black12,
body: SafeArea(
child: SizedBox.expand(
child: FlatButton(
onPressed: () {
setState(() {
i++;
print(i);
});
},
child: Text(
i.toString(),
style: TextStyle(fontSize: 50.0, color: Colors.blueAccent),
),
),
),
),
),
);
}
}
I'm trying to get a button in Flutter to expand to its parent width and dynamically expand as more widgets are added. For example, if there are two buttons in a row, they will expand to 50% width each, for three buttons 33% etc.
I tried width: Double.infinite which works for a single button. Understandably, this would not work for multiple buttons since the width is unconstrained and Flutter does not know how to size the element.
I tried all sorts of properties, SizedBox, crossAxisAlignment, Expanded but they don't seem to work.
What I am trying to achieve would be something similar to this: https://bulma.io/documentation/columns/basics/ - a flex based column layout.
App.dart
class App extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
// theme: WhisperyTheme,
// theme: ThemeData(fontFamily: "Overpass"),
home: Scaffold(
body: Center(
child: Column(
children: <Widget>[
LongButton(
onTap: () => null,
text: "Primary Button",
),
Row(
children: <Widget>[
LongButton(
onTap: () => null,
text: "Secondary Button",
),
LongButton(
onTap: () => null,
text: "Secondary Button",
),
],
)
],
),
),
),
);
}
}
Button.dart
#override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(maxHeight: 40.0),
margin: EdgeInsets.all(15),
height: 40.0,
decoration: BoxDecoration(border: Border.all(width: 1.5)),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: _onTap,
child: Center(
child: Text(_text),
),
),
),
);
}
You can wrap your button with Flexible widget, its default flex parameter is 1, so the space will be divided equally between all the widgets:
Row(
children: <Widget>[
Flexible(
child: LongButton(
onTap: () => null,
text: 'Secondary Button',
),
),
Flexible(
child: LongButton(
onTap: () => null,
text: 'Secondary Button',
),
),
],
)
I'm new to flutter. I'm trying to render a page whose body contains Listview with multiple widgets.
_buildOrderDetails widget in the listview is widget that is build with listview.builder() , remaining are normal widgets.
The problem is page is not being scrolled .
When the body Listview is changed to column and _buildOrderDetails is given as child to the Expanded, the listview is limited to some extent of the page height and being scrolled. But when input is focused the page is overflowed
Widget build(BuildContext context){
return ScopedModelDescendant<MainModel>(
builder: (BuildContext context, Widget child, MainModel model) {
return Scaffold(
appBar: AppBar(
title: Text('Order Details'),
actions: <Widget>[
IconButton(
onPressed: () {
model.addNewOrder();
},
icon: Icon(Icons.add),
),
BadgeIconButton(
itemCount: model.ordersCount,
badgeColor: Color.fromRGBO(37, 134, 16, 1.0),
badgeTextColor: Colors.white,
icon: Icon(Icons.shopping_cart, size: 30.0,),
onPressed: () {}
),
]
),
body: ListView(
children: [
Column(
children: [
_buildItemsTitle(),
Expanded(child: _buildOrderDetails(context, model)),
]
),
Card(
child: Column(
children:[
TextField(
decoration: InputDecoration(
labelText: 'Offer Code'
),
),
RaisedButton(
onPressed: (){},
child: Text('Apply'),
)
]
),
),
Card(child: _orderAmount(context, model),),
RaisedButton(
color: Theme.of(context).accentColor,
onPressed: (){},
child: Text('Checkout',
style: TextStyle(
fontSize: 20.0,
color: Colors.white
)
),
)
]
),);});}}
Maybe it can help someone in the future, but the trick seems to be: use ListView + LimitedBox(maxHeight) + Column ...
ListView(
padding: EdgeInsets.zero,
shrinkWrap: true,
children: [
FocusTraversalGroup(
child: Form(
key: _formKey,
child: LimitedBox(
maxHeight: MediaQuery.of(context).size.height,
child: Column(
// mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Spacer(flex: 30), // Or Expanded
// More Widgets...
Spacer(flex: 70), // Or Expanded
// ....
Try not to use expanded on growing items. If you want to cover a percentage/fractional height wrap the height with a fixed height or the full height with a container that includes box contstains, then proceed to have expanded or fixed height children. also helpful is the FracionalBox
In the example you showed there is no need for expanded, the children inside will give a content height and the SingleChildScrollView will automaticly handle scrolling based on children.
Widget build(BuildContext context) {
return ScopedModelDescendant<MainModel>(
builder: (BuildContext context, Widget child, MainModel model) {
return Scaffold(
appBar: AppBar(title: Text('Order Details'), actions: <Widget>[
IconButton(
onPressed: () {
model.addNewOrder();
},
icon: Icon(Icons.add),
),
BadgeIconButton(
itemCount: model.ordersCount,
badgeColor: Color.fromRGBO(37, 134, 16, 1.0),
badgeTextColor: Colors.white,
icon: Icon(
Icons.shopping_cart,
size: 30.0,
),
onPressed: () {}),
]),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Column(children: [
_buildItemsTitle(),
Container(child: _buildOrderDetails(context, model)),
]),
Card(
child: Column(children: [
TextField(
decoration: InputDecoration(labelText: 'Offer Code'),
),
RaisedButton(
onPressed: () {},
child: Text('Apply'),
)
]),
),
Card(
child: _orderAmount(context, model),
),
RaisedButton(
color: Theme.of(context).accentColor,
onPressed: () {},
child: Text('Checkout',
style: TextStyle(fontSize: 20.0, color: Colors.white)),
),
],
),
),
);
});
}