This question already has an answer here:
Append items dynamically to ListView
(1 answer)
Closed 2 years ago.
I have created a class that has a widget that I want to appear on the home page as many times as the button is pressed.
https://gyazo.com/f9cc3e2c1f48e9efeb7b1d1c9b0b988e
as you can observe in this picture, the 'home care kit' rectangles is the widget, and I want them to appear when you press the add device button.
Here is the code of the button:
child: RaisedButton(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0),
side: BorderSide(color: Colors.transparent)),
onPressed: () {print('Clicked!');},
color: Colors.transparent,
textColor: Colors.white,
child: Text('Add Device', style: TextStyle(color: Colors.white, fontSize: 18)),
),
and the widget class is simply called HomeCareKit()
You first need a list of widgets:
List<Widget> _widgetList = [];
and you pass this list of widgets to your ListView or Column like:
ListView(
children:_widgetList,
)
to add a widget dynamically you can do this inside your onPressed:
setState(() {
_widgetList.add(HomeCareKit());
});
Related
I'm trying to center the minimized icon in this Icon Button but can't get it to work:
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 25,
child: TextButton(
onPressed: appWindow.minimize,
style: const ButtonStyle(
alignment: Alignment.center,
padding: MaterialStatePropertyAll(EdgeInsets.all(0))),
child: const Icon(
Icons.minimize,
color: Colors.white,
),
),
),
TextButton(
onPressed: maximizeOrRestore,
child: Icon(
appWindow.isMaximized ? Icons.fullscreen_exit : Icons.fullscreen,
color: Colors.white,
)),
TextButton(
onPressed: appWindow.close,
child: const Icon(
Icons.close,
color: Colors.white,
),
)
],
);
}
I'm expecting the button to be centered and as you can see i've already tried using alignment and padding
When you say "center the minimized icon", do you mean that this icon should be between the other two icons? In that case, you just need to switch the first two widgets in the Row widget's children.
But I think you want the minimize icon to be higher so that it's something like-> - ◾️ X
If this is what you want then you can't use Icons.minimize. If you check out this icon on this page, you will notice that the minimize icon looks like an underscore. This is by design. I think this looks good, but if you insist on having a minus sign kind of symbol then you can use Icons.remove_rounded.
It's not that the icon is not centered, the Material minimize icon has blank space in the upper size, because it is suppose to be down to understand that is a minimize button just like the maximize button has blank space in the bottom size. What you can try is to use a different icon if you really want it to be centered. Try with Icons.horizontal_rule.
You can use CupertinoIcons.minus like
TextButton(
onPressed: appWindow.minimize,
child: const Icon(
CupertinoIcons.minus,
color: Colors.white,
),
),
class _CreateRoomButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
// ignore: deprecated_member_use
return OutlineButton(
onPressed: () => print('Create Room'),
color: Colors.white,
borderSide: BorderSide(width: 3.0, color: Colors.blueAccent[100]),
textColor: Palette.facebookBlue,
child: Row(
children: [
Icon(
Icons.video_call,
size: 35.0,
color: Colors.white,
)
],
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
);
}
}
I have used an Outline Button in which I wanna set the border color to blueAccent[100]. On trying to do so the following error comes up :
The argument type 'Color?' can't be assigned to the parameter type 'Color'.
Also I wanna shift the outline button into the new Outlined Button but I am unable to style that acc to the app.
If you see Colors.blueAccent[100] actually gets a value from map. So if your version of flutter is bellow 2.0 you would get this error since it may return a null value.
Now why did this happen: This is because if you are using flutter 2.2 which is by default null-safe. You will get many errors.
Solution : Colors.blueAccent[100]! or Colors.blueAccent.shade100;
For OutlinedButton:
OutlinedButton.icon(
label: Text('MY BUTTON'),
icon: Icon(Icons.video_call),
onPressed: () {
print('Pressed');
},
style: OutlinedButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.teal,
shape: const RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(30))),
),
)
You can tap into more properties : From here or you can see this Material Guidelines or this blog This Blog
you have updated flutter sdk i think and using null safety feature. just add ! after color.
color: Colors.blueAccent[100]!,
Note : Outlinebutton is deprecated use outlinedbutton instead.
Flutter Outlinedbutton
What I am aiming for is that I have created around 5 stateful screens that are supposed to be navigated on button press. Now all the five buttons are same so I am using a for loop to assign those widgets and then add them to Column Widget list as shown below:
for(int i=0;i<ButtonTexts.length;i++)
{
NavigatorS.add(Container(
width: 300,
height: 40,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(NavigatorRadius),
side: BorderSide(color: NavigatorBorderColour)),
onPressed: (context)=>functionCalls[i],
color: NavigatorBarColour,
textColor: NavigatorTextColour,
child: Text(ButtonTexts[i],
style: TextStyle(fontSize: 20)),
),
));
}
Now the issue is that I have created a list of functions as shown below:
List functionCalls =[buildContext(context),buildContext2(context),buildContext3(context),buildContext4(context),buildContext5(context)];
But these functions need context to navigate to a different screen as the functions are defined as follows:
void buildContext(context)
{Navigator.push(context,MaterialPageRoute(builder: (context) => BirthdayCard()),);
}
Someone please help me with this, also I can't use route pages as I am operating on classes, my each screen dart file is nothing but a class of stateful widget. What I want is to avoid repetative coding and pass function definitions in the onpressed option.
Didn't get the exact problem that you are facing, anyway check this
void buildContext(context,screen)
{
Navigator.push(context,MaterialPageRoute(builder: (context) => screen),);
}
Widget getButton(onPressed) {
return RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(NavigatorRadius),
side: BorderSide(color: NavigatorBorderColour)),
onPressed: onPressed,
color: NavigatorBarColour,
textColor: NavigatorTextColour,
child: Text(ButtonTexts[i],
style: TextStyle(fontSize: 20)),
),
}
And in your code, you can call this,based on the conditions
getButton((){
buildContext(context,BirthdayCard());
}
);
I am looking to open and close a drawer programmatically when I press on an icon. I am trying to use keys, but I am not having much luck. I found this article - Flutter: How to open Drawer programmatically ,but I am having issues.
I have a column of icons (see screenshot) that I include in one file and my drawer is in another, both of which are obviously included in a third (which is a fullscreen google map). I am looking at using a global key, but I am unsure where to put everything.
In my map page I have
class _TheMapState extends State<TheMap> with WidgetsBindingObserver {
GlobalKey<ScaffoldState> _drawerKey = GlobalKey();
...
...
When I try to add the key in my drawer page, it doesn't recognise it, so I add the GlobalKey line to my drawer page. I also have to do that to my icon options page too, otherwise the app won't build, due to the errors. There are no errors when I do this, but nothing happens when I click on the button.
Here is where I added the key to the drawer.
Widget mapDrawer() {
return Drawer(
key: _drawerKey,
...
...
Here is my icon code, which is in a separate file.
Widget _buildShowHideDrawerIcon() {
return Container(
child: Opacity(
opacity: 0.60,
child: Container(
padding: EdgeInsets.all(7.0),
decoration: BoxDecoration(
color: Colors.white,
//border: Border.all(color: Colors.black12, width: 1.0),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 3.0,
),
],
),
child: InkWell(
onTap: () {
print("SHOW/HIDE DRAWER ICON PRESSED");
setState(() {
_drawerKey.currentState.openDrawer();
});
},
child: Icon(
Icons.swap_horiz,
color: Colors.black87,
size: 24.0,
semanticLabel: 'Show ,or hide sliding drawer',
),
),
),
),
);
}
I would appreciate any help on this.
Assign the key to Scaffold, not Drawer
Scaffold(
key: _drawerKey,
drawer: Drawer(),
You should assign the key to Scaffold, not Drawer
Scaffold(
key: _drawerKey,
And replace the line:
_drawerKey.currentState.openDrawer();
With
_drawerKey.currentState?.openDrawer();
Is there a way to set the fontFamily for all buttons in a Flutter app?
I see I can set my fontFamily for my MaterialApp using theme.fontFamily, but I'd like to use a different fontFamily for all my buttons.
I saw there is also a ButtonThemeData, but it seems to be related to colors and shapes only.
I don't want to set my fontFamily explicitly every time I use a button or having to wrap all types of buttons, is there any way to accomplish this?
Thanks!
You should use themes to customize fonts for whole widgets, including buttons : https://flutter.dev/docs/cookbook/design/fonts
Simplest might be to create a helper method that returns a Button configured as you wish.
I recomend creating a custom button that "extends" Flutter MaterialButton or RawMaterialButton. Remember to add buttonText as a paramater too if you want your button to be reusable. Also remember to add TextStyle(fontFamily: 'Raleway') to the Text widget style.
Another option would be to "extend" the Flutter Text widget in the same way as with the button example below, and add your CustomTextWidget as a child to the Flutter MaterialButton widget. I prefer to use both in a combination. CustomButton together with CustomText widget.
import 'package:flutter/material.dart';
class CustomButton extends StatelessWidget {
CustomButton({#required this.onPressed});
final GestureTapCallback onPressed;
#override
Widget build(BuildContext context) {
return RawMaterialButton(
fillColor: Colors.green,
splashColor: Colors.greenAccent,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
Icon(
Icons.face,
color: Colors.amber,
),
SizedBox(
width: 10.0,
),
Text(
"Tap Me",
maxLines: 1,
style: TextStyle(color: Colors.white),
),
],
),
),
onPressed: onPressed,
shape: const StadiumBorder(),
);
}
}
Here is the implementation:
CustomButton(
onPressed: () {
print("Tapped Me");
},
)