Not able to print clicked after clicking and all area from CustomBtn bracket is red underlined till the bracket closed
CustomBtn(
text: "Create New Account",
onPressed: () {
print("Clicked");
},
),
Here is CustomBtn class it is another file
import 'package:flutter/material.dart';
class CustomBtn extends StatelessWidget {
final String write;
final void Function() onPressed;
final bool outlineBtn;
final bool isLoading;
CustomBtn(this.write, this.onPressed, this.outlineBtn, this.isLoading, {Key? key} : super(key: key));
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed,
child: Container(
height: 70.0,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 2.0,
),
borderRadius: BorderRadius.circular(
12.0,
),
),
margin: const EdgeInsets.symmetric(
horizontal: 24.0,
vertical: 24.0,
),
child: Text(
write ?? "text",
style: const TextStyle(
fontSize: 16.0,
color: Colors.black,
fontWeight: FontWeight.w600,
),
),
),
);
}
}
I am Trying and seeing from this youtube video
https://youtu.be/YPqYnM6KjZI
and here is the time where i am facing problem
at 12:50 https://youtu.be/YPqYnM6KjZI?t=770[][2]
your constructor has positional parameters and therefore are required and you have to pass values to it otherwise the compiler complains :). Either change them to named parameters and make the type nullable like so:
final String? write;
CustomBtn({
this.write,
etc...
})
or simply pass some values
This is because your constructor has
final String write;
final void Function() onPressed;
final bool outlineBtn;
final bool isLoading;
so it requires to send the parameters to works.
Here you Flutter is waiting a call of your customBtn like this :
CustomBtn(
write: "Create New Account",
onPressed: () {
print("Clicked");
},
outlineBtn: false,
isLoading: false,
),
If you don't need to require this parameters, you can put a ? after the type in the declaration, like below.
final String? write;
final void? Function() onPressed;
final bool? outlineBtn;
final bool? isLoading;
Just convert this line:
CustomBtn(this.write, this.onPressed, this.outlineBtn, this.isLoading, {Key? key} : super(key: key));
to:
CustomBtn({this.write, this.onPressed, this.outlineBtn, this.isLoading, Key? key} : super(key: key));
Related
import 'package:flutter/material.dart';
import 'package:ourchatapp/constants.dart';
class RoundedButton extends StatelessWidget {
final String text;
final Function press;
final Color color, textColor;
const RoundedButton({
Key? key,
required this.text,
required this.press,
this.color = kPrimaryColor,
this.textColor = Colors.white,
}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
width: size.width * 0.8,
child: ClipRRect(
borderRadius: BorderRadius.circular(29),
child: newElevatedButton(),
),
);
}
Widget newElevatedButton() {
return ElevatedButton(
child: Text(
text,
style: TextStyle(color: textColor),
),
onPressed: press,
style: ElevatedButton.styleFrom(
primary: color,
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 20),
textStyle: TextStyle(
color: textColor, fontSize: 14, fontWeight: FontWeight.w500)),
);
}
}
I want to design my own button, when I add it to the relevant pages, I get such an error and when I click the button, it does not switch between the pages.
I have created login and sign up buttons on the welcome screen, but when I click on these buttons, they do not switch to the relevant pages. please help me
You have declared the press as Function type so you change -
onPressed: press,
to -
onPressed: () => press(),
these way you will call the function and it will change the page.
Try to change press type from Function to VoidCallback, so your press parameter should look like this:
final VoidCallback press
Or try this:
onPressed : press.call()
I have six buttons on the screen and they all do the same function. But I want to control the colors of these buttons to be clicked. If the button is clicked, the button color should be green (I'm doing this buttonColorDisable.) Everything is normal so far, but in _buttonFunction() widget.callbackColor(); When I call it, I expect all button colors to change again, but only the last button is affected. Other buttons still remain green. how do i solve this.
class BuildNumButton extends StatefulWidget {
final int number;
final Color color;
final Color buttonColorDisable;
final Function callbackColor;
final Function callbackList;
final Function callbackScore;
final Function callbackTarget;
const BuildNumButton({
Key? key,
required this.number,
required this.callbackScore,
required this.callbackList,
required this.callbackTarget,
required this.callbackColor,
required this.color,
required this.buttonColorDisable,
}) : super(key: key);
#override
State<BuildNumButton> createState() => _BuildNumButtonState();
}
class _BuildNumButtonState extends State<BuildNumButton> {
bool isButtonVisible = false;
void _buttonFunction() {
isButtonVisible = true;
CalculateScore.sumNumbers(widget.number);
CalculateScore.calculateScore();
widget.callbackScore();
if (CalculateScore.answer == true) {
if (!CalculateScore.endGame) {
widget.callbackList();
widget.callbackColor();
isButtonVisible = false;
}
widget.callbackTarget();
}
}
#override
Widget build(BuildContext context) {
return SizedBox(
width: 150,
height: 120,
child: TextButton(
style: ButtonStyle(
backgroundColor: isButtonVisible
? MaterialStateProperty.all(
widget.buttonColorDisable) //button color green
: MaterialStateProperty.all(widget.color),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: const BorderSide(color: Colors.white, width: 3),
),
),
),
onPressed: isButtonVisible ? null : _buttonFunction,
child: Text(
widget.number.toString(),
style: numButtonTextStyle,
),
),
);
}
}
I will prefer creating List<int> to hold tapped index and use BuildNumButton extends StatelessWidget.
Run on dartPad.
class BuildNumButton extends StatelessWidget {
final int number;
final Color color;
final Color buttonColorDisable;
final VoidCallback callback;
final bool isDisable;
const BuildNumButton({
Key? key,
required this.number,
required this.color,
required this.buttonColorDisable,
required this.callback,
required this.isDisable,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
width: 150,
height: 120,
child: TextButton(
style: ButtonStyle(
backgroundColor: isDisable
? MaterialStateProperty.all(
buttonColorDisable) //button color green
: MaterialStateProperty.all(color),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: const BorderSide(color: Colors.white, width: 3),
),
),
),
onPressed: isDisable ? null : callback,
child: Text(
number.toString(),
),
),
);
}
}
and VoidCallback used to get tapEvent and based on condition update the state.
List<int> disableButtons = [];
.....
...List.generate(
6,
(index) => BuildNumButton(
buttonColorDisable: Colors.green,
isDisable: disableButtons.contains(index),
callback: () {
disableButtons.add(index);
if (disableButtons.length == 6) disableButtons.clear();
setState(() {});
},
color: Colors.cyanAccent,
number: index,
),
)
I have the CupertinoContextMenu setup and it works well. However, I have an Icon in a separate widget which when tapped (single tap) would also trigger the opening of the Context Menu.
Is anything like this possible?
I hacked something a little remotly iosy together from the material PopupMenuButton. Maybe it can help you as a basis for styling.
import 'package:flutter/material.dart';
class IosLikePopupMenuButton extends StatelessWidget {
final double borderRadius;
final Color _backgroundColor = const Color.fromARGB(209, 235, 235, 235);
final List<IosLikePopupMenuItem> Function(BuildContext) itemBuilder;
const IosLikePopupMenuButton({
Key? key,
this.borderRadius = 24.0,
required this.itemBuilder,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return PopupMenuButton<String>(
icon: const Icon(Icons.more_horiz),
itemBuilder: (context1) {
/// give the current context and map the IosLikePopupMenuItem dtos to PopupMenuEntry while splicing in dividers
return itemBuilder(context1)
.map((e) => e.popupMenuItems())
.toList()
.fold(
List<PopupMenuEntry<String>>.empty(growable: true),
(p, e) => [
...p,
...[e, const PopupMenuDivider()]
])
/// delete the last divider
..removeLast();
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(borderRadius),
),
),
color: _backgroundColor,
);
}
}
class IosLikePopupMenuItem {
final double menuItemHeight, minSpaceBtwnTxtAndIcon;
final String lableText;
final IconData icon;
final void Function() onTap;
final TextStyle _textStyle =
const TextStyle(color: Colors.black, fontSize: 22.0);
IosLikePopupMenuItem({
this.menuItemHeight = 24.0,
this.minSpaceBtwnTxtAndIcon = 48.0,
required this.lableText,
required this.icon,
required this.onTap,
});
PopupMenuItem<String> popupMenuItems() => PopupMenuItem<String>(
height: menuItemHeight,
textStyle: _textStyle,
onTap: onTap,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
lableText,
),
SizedBox(width: minSpaceBtwnTxtAndIcon),
Icon(icon),
],
),
);
}
I'm trying to create a SideMenu with different SideMenuItems.
For that I created a new class and want to update the color of Text when the SideMenuItem is clicked. For that I want to transfer the activeState and all that stuff you see in the code below:
The use of my class in the Widget:
bool isActive = false;
...
SideMenuItem(
icon: Icon(
Icons.inbox,
size: 20,
color: isActive ? kPrimaryColor : kGrayColor,
),
activeState: isActive,
title: "Archiv",
toggleActiveState: (activeState) {
setState(() {
isActive = !activeState;
});
},
),
And here is my class:
import 'package:flutter/material.dart';
import 'package:gastronomy/constants.dart';
class SideMenuItem extends StatelessWidget {
// ignore: prefer_const_constructors_in_immutables
SideMenuItem({
Key? key,
required this.activeState,
this.itemCount = 0,
this.showBorder = true,
#required this.icon,
#required this.title,
required this.toggleActiveState,
}) : super(key: key);
final bool activeState;
final bool showBorder;
final int itemCount;
final Icon? icon;
final String? title;
final Function(bool) toggleActiveState;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: kDefaultPadding),
child: InkWell(
onTap: () {
toggleActiveState(activeState);
},
child: Row(
children: [
const SizedBox(width: 15),
const SizedBox(width: kDefaultPadding / 4),
Expanded(
child: Container(
padding: const EdgeInsets.only(bottom: 15, right: 5),
decoration: showBorder
? const BoxDecoration(
border: Border(
bottom: BorderSide(color: Color(0xFFDFE2EF)),
),
)
: null,
child: Row(
children: [
icon!,
const SizedBox(width: kDefaultPadding * 0.75),
Text(
title!,
style: Theme.of(context).textTheme.button?.copyWith(
color: activeState ? kTextColor : kGrayColor,
),
),
const Spacer(),
// if (itemCount != null) CounterBadge(count: itemCount)
],
),
),
),
],
),
),
);
}
}
I ended up with that pieces of code but well, how you might know, all SideMenuItems change there color when I click one.
I'm pretty new at using this way of code so I would be thankful to all informations you can include into your answer.
One option is to render all the menu items through a map function and compare each item with the selected option, like in the example below:
import 'package:flutter/material.dart';
class MenuExample extends StatefulWidget {
const MenuExample({Key? key}) : super(key: key);
#override
_MenuExampleState createState() => _MenuExampleState();
}
class _MenuExampleState extends State<MenuExample> {
List<String> menuOptions = const ['Item 1', 'Item 2', 'Item 3'];
String selectedOption = '';
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
backgroundColor: Colors.amber,
child: ListView(
children: menuOptions.map((menuOption) {
return InkWell(
onTap: () => setState(() {
selectedOption = menuOption;
}),
child: MenuItem(
name: menuOption,
isSelected: menuOption == selectedOption,
),
);
}).toList()),
),
);
}
}
class MenuItem extends StatelessWidget {
const MenuItem({Key? key, this.isSelected = false, required this.name})
: super(key: key);
final bool isSelected;
final String name;
#override
Widget build(BuildContext context) {
return ListTile(
title: Text(
name,
style: TextStyle(
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal),
),
);
}
}
What is the best way of formatting text enclosed in MdiIcons in flutter and set the text to a particular color in my case white?
Doing it this way I end up with the text appearing as color black(default set by flutter and I want it that way):
[MdiIcons.shieldAccount, Colors.deepPurple, 'COVID-19 Info Center'],
Doing it this way I end up with an error
[MdiIcons.shieldAccount, Colors.deepPurple, Text('COVID-19 Info Center', style: TextStyle(color: Colors.white),)]
the error being thrown is
Expected a value of type 'String', but got one of type 'Text'
The code
class MoreOptionsList extends StatelessWidget {
final List<List> _moreOptionsList = const [
[MdiIcons.shieldAccount, Colors.deepPurple, Text('COVID-19 Info Center', style: TextStyle(color: Colors.white),)],
[MdiIcons.accountMultiple, Colors.cyan, Text('Friends', style: TextStyle(color: Colors.white),)],
[MdiIcons.facebookMessenger, Colors.pinkAccent, Text('Messenger', style: TextStyle(color: Colors.white),)],
[MdiIcons.flag, Colors.orange, Text('Pages', style: TextStyle(color: Colors.white),)],
[MdiIcons.storefront, Colors.lightBlue, Text('Market Place', style: TextStyle(color: Colors.white),)],
[MdiIcons.video, Colors.green, Text('Events', style: TextStyle(color: Colors.white),)],
];
final User currentUser;
const MoreOptionsList({Key key,
#required this.currentUser}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(maxWidth: 280.0),
child: ListView.builder(
itemCount: 1 + _moreOptionsList.length,
itemBuilder: (BuildContext context, int index){
if(index == 0) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: UserCard(user: currentUser),
);
}
final List option = _moreOptionsList [index-1];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: _Option(icon: option[0], color: option[1], label: option[2]),
);
},
),
);
}
}
class _Option extends StatelessWidget {
final IconData icon;
final Color color;
final String label;
const _Option({Key key,
#required this.icon,
#required this.color,
#required this.label}) : super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () => print(label),
child: Row(
children: [
Icon(icon, size:38.0, color: color,),
const SizedBox(width: 6.0),
Flexible(child: Text(
label, style: const TextStyle(fontSize: 16.0),
overflow: TextOverflow.ellipsis,
),)
],
),
);
}
}
Text is a widget not a string you should color the text inside the widget that required the string so that is mean you can't use widget for string
if you want to get the widget from the list you should change the label type to Text or Widget instead of using String type like this
class _Option extends StatelessWidget {
final IconData icon;
final Color color;
final Text label;
const _Option({Key key,
#required this.icon,
#required this.color,
#required this.label}) : super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () => print(label),
child: Row(
children: [
Icon(icon, size:38.0, color: color,),
const SizedBox(width: 6.0),
Flexible(child: label)
],
),
);
}
}
if the above code didn't help or wasn't good enough you can use this one by adding the String to list then adding it to the Text don't forget to restart the app
final List<List> _moreOptionsList = const [
[Icons.ac_unit, Colors.deepPurple, 'COVID-19 Info Center'],
[Icons.ac_unit, Colors.cyan, 'Friends'],
[Icons.ac_unit, Colors.pinkAccent, 'Messenger'],
[Icons.ac_unit, Colors.orange, 'Pages'],
[Icons.ac_unit, Colors.lightBlue, 'Market Place'],
[Icons.ac_unit, Colors.green, 'Events'],
];
class _Option extends StatelessWidget {
final IconData icon;
final Color color;
final String label;
const _Option(
{Key key,
#required this.icon,
#required this.color,
#required this.label})
: super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () => print(label),
child: Row(
children: [
Icon(
icon,
size: 38.0,
color: color,
),
const SizedBox(width: 6.0),
Flexible(
child: Text(
'$label',
style: const TextStyle(fontSize: 16.0, color: Colors.black),
overflow: TextOverflow.ellipsis,
),
)
],
),
);
}
}