i cant show logo Facebook,Google and apple it give me error - flutter

class SignInPage extends GetView<SignInController> {
const SignInPage({Key? key}) : super(key: key);
Widget _buildLogo(){
return Container(
margin: EdgeInsets.only(top: 100.h, bottom: 80.h),
child: Text(
"WiseApp",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontWeight: FontWeight.bold,
fontSize: 34.sp
),
),
);
}
Widget _buildThirdPartyLogin(String loginType, String logo){
return GestureDetector(
child: Container(
width: 300.w,
height: 50.h,
padding: EdgeInsets.all(10.h),
margin: EdgeInsets.only(bottom: 15.h),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
borderRadius: const BorderRadius.all(Radius.circular(5)),
boxShadow: [
BoxShadow(
color: Colors.black87.withOpacity(0.1),
spreadRadius: 1,
blurRadius: 2,
offset: const Offset(0, 1)
)
]
),
child: Row(
mainAxisAlignment: logo==''?MainAxisAlignment.center:MainAxisAlignment.start,
children: [
logo==''?Container(): Container(
padding: EdgeInsets.only(left: 40.w, right: 10.w),
child: Image.asset("assets/icons/photo.png"),
),
Container(
child: Text(
"Se connecter avec $loginType",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontWeight: FontWeight.normal,
fontSize: 14.sp
),
),
)
],
)
),
onTap: (){
print("....Inscrivez-vous avec $loginType...");
},
);
}
Can you help me please

Related

Flutter GridView Item Selection Color Change (on tap)

I have created a GridView, and the next step I'm trying to achieve is changing the color of the container when it is tapped/ selected. When I try and do it with both Inkwell and GestureDetector, it changes the color of both containers in the row, rather than changing each one individually. I want to have each container change colors when it is tapped, as well as have a check mark appear on the corner:
(1) My Layout
(2) Example of what I want
I'm very new to Flutter, so I know that the way that I've coded my layout is far from optimal. I'm attaching a small chunk of just the GridView portion to show how I created the GridView (basically, I created 6 containers all with varying custom icons and text). Hopefully I'll receive some assistance :).
Updated June 21st:
class SelectionPage extends StatefulWidget {
const SelectionPage({Key? key}) : super(key: key);
#override
_SelectionPageState createState() => _SelectionPageState();
}
class Item{
String title;
bool isSelected;
Item({required this.title, this.isSelected = false});
List <Item>listOfModel = [];
listOfModel.add(Item(title: "Maintaining healthy relationships"));
listOfModel.add(Item(title: "Being happier and more content in life"));
}
class _SelectionPageState extends State<SelectionPage>{
Color _ContainerColor = Colors.white;
#override
Widget build(BuildContext) {
double _height = MediaQuery.of(context).size.height;
final data = ModalRoute.of(context)!.settings;
late String retrieveString;
if (data.arguments == null)
retrieveString = "empty";
else
retrieveString = data.arguments as String;
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: const Color(0xff31708c),
body: Padding(
padding: EdgeInsets.only(
left: 30,
right: 30,
top: _height * 0.2),
child: Column(
children: <Widget>[
Text('Hello there $data! What all would you like to focus on? You can pick all that apply:',
style: GoogleFonts.montserrat(
color: Colors.white70,
fontSize: 19,
fontWeight: FontWeight.w600
),
textAlign: TextAlign.center,),
const SizedBox(height: 12,),
Column(children: [
GridView.count(
primary: true,
shrinkWrap: true,
padding: const EdgeInsets.all(10),
childAspectRatio: 1.15,
crossAxisCount: 2,
crossAxisSpacing: 25,
mainAxisSpacing: 25,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
_ContainerColor = _ContainerColor == Colors.white
? Color(0xffa1d0e6)
: Colors.white;
});
},
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: const Color.fromARGB(255, 20, 83, 106),
width: 2.5),
color: _ContainerColor
),
child: Column(
children: [
const Align(alignment: Alignment.topCenter,
child: Icon(MyFlutterApp.relationships,
color: Color(0xff31708c),
size: 45,),
),
const SizedBox(height: 4,),
Text('Maintaining healthy relationships',
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: const Color(0xff31708c)
),
textAlign: TextAlign.center,)
],
),
),
),
GestureDetector(
onTap: () {
setState(() {
_ContainerColor = _ContainerColor == Colors.white
? Color(0xffa1d0e6)
: Colors.white;
});
},
child: Container(
padding: const EdgeInsets.all(13.5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: const Color.fromARGB(255, 20, 83, 106),
width: 2.5),
color: Colors.white
),
child: Column(
children: [
const Align(alignment: Alignment.topCenter,
child: Icon(MyFlutterApp.happy,
color: Color(0xff31708c),
size: 30,),
),
const SizedBox(height: 12,),
Text('Being happier and more content in life',
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: const Color(0xff31708c)
),
textAlign: TextAlign.center,)
],
),
),
),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: const Color.fromARGB(255, 20, 83, 106),
width: 2.5),
color: Colors.white
),
child: Column(
children: [
const Align(alignment: Alignment.topCenter,
child: Icon(MyFlutterApp.balance,
color: Color(0xff31708c),
size: 40,),
),
const SizedBox(height: 8,),
Text('Maintaining a better work-life balance',
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: const Color(0xff31708c)
),
textAlign: TextAlign.center,)
],
),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: const Color.fromARGB(255, 20, 83, 106),
width: 2.5),
color: Colors.white
),
child: Column(
children: [
const Align(alignment: Alignment.topCenter,
child: Icon(MyFlutterApp2.personal_growth,
color: Color(0xff31708c),
size: 35,),
),
const SizedBox(height: 10,),
Text('Personal growth and development',
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: const Color(0xff31708c)
),
textAlign: TextAlign.center,)
],
),
),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: const Color.fromARGB(255, 20, 83, 106),
width: 2.5),
color: Colors.white
),
child: Column(
children: [
const Align(alignment: Alignment.topCenter,
child: Icon(MyFlutterApp2.meditate,
color: Color(0xff31708c),
size: 45,),
),
const SizedBox(height: 4,),
Text('Stress and anxiety management',
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: const Color(0xff31708c)
),
textAlign: TextAlign.center,)
],
),
),
Container(
padding: const EdgeInsets.all(11),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: const Color.fromARGB(255, 20, 83, 106),
width: 2.5),
color: Colors.white
),
child: Column(
children: [
const Align(alignment: Alignment.topCenter,
child: Icon(MyFlutterApp3.well_rounded,
color: Color(0xff31708c),
size: 37,),
),
const SizedBox(height: 10,),
Text('Mental and emotional well-being',
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: const Color(0xff31708c)
),
textAlign: TextAlign.center,)
],
),
),
],
),]),
const SizedBox(height: 17,),
ElevatedButton(
onPressed: () {
Navigator.push(context,
PageTransition(
type: PageTransitionType.bottomToTop,
duration: const Duration(milliseconds: 650),
child: const LoginScreen2() // CHANGE THIS AS SOON AS YOU CAN FIGURE SOMETHING OUT
));
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(
horizontal: 88,
vertical: 16),
primary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)
)
),
child: Text(
'Continue',
style: GoogleFonts.montserrat(
color: const Color.fromARGB(255, 20, 83, 106),
fontSize: 19,
fontWeight: FontWeight.w600
),
),)
],
),
),
);
}
}
Hey you can create a model with 2 variables String title and bool isSelected. If you need you can add icon in item model also -
See below updated code-
class SelectionPage extends StatefulWidget {
const SelectionPage({Key? key}) : super(key: key);
#override
_SelectionPageState createState() => _SelectionPageState();
}
class _SelectionPageState extends State<SelectionPage>{
// Color _ContainerColor = Colors.white;
late String retrieveString;
List <Item>listOfModel = [];
#override
void initState() {
final data = ModalRoute.of(context)!.settings;
if (data.arguments == null) {
retrieveString = "empty";
} else {
retrieveString = data.arguments as String;
}
listOfModel.add(Item(title: "Maintaining healthy relationships"));
listOfModel.add(Item(title: "Being happier and more content in life"));
super.initState();
}
#override
Widget build(BuildContext context) {
double _height = MediaQuery.of(context).size.height;
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: const Color(0xff31708c),
body: Padding(
padding: EdgeInsets.only(
left: 30,
right: 30,
top: _height * 0.2),
child: Column(
children: <Widget>[
Text('Hello there $data! What all would you like to focus on? You can pick all that apply:',
style: GoogleFonts.montserrat(
color: Colors.white70,
fontSize: 19,
fontWeight: FontWeight.w600
),
textAlign: TextAlign.center,),
const SizedBox(height: 12,),
GridView.count(
primary: true,
shrinkWrap: true,
padding: const EdgeInsets.all(10),
childAspectRatio: 1.15,
crossAxisCount: 2,
crossAxisSpacing: 25,
mainAxisSpacing: 25,
children: [
gridItem(listOfModel[0],MyFlutterApp.relationships ),
gridItem(listOfModel[1],MyFlutterApp.relationships ),
],
),
const SizedBox(height: 17,),
ElevatedButton(
onPressed: () {
Navigator.push(context,
PageTransition(
type: PageTransitionType.bottomToTop,
duration: const Duration(milliseconds: 650),
child: const LoginScreen2() // CHANGE THIS AS SOON AS YOU CAN FIGURE SOMETHING OUT
));
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(
horizontal: 88,
vertical: 16),
primary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)
)
),
child: Text(
'Continue',
style: GoogleFonts.montserrat(
color: const Color.fromARGB(255, 20, 83, 106),
fontSize: 19,
fontWeight: FontWeight.w600
),
),)
],
),
),
);
}
Widget gridItem(Item item, IconData icon){
return GestureDetector(
onTap: () {
setState(() {
item.isSelected = !item.isSelected;
});
},
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: const Color.fromARGB(255, 20, 83, 106),
width: 2.5),
color: item.isSelected ? const Color(0xffa1d0e6) : Colors.white
),
child: Column(
children: [
Align(alignment: Alignment.topCenter,
child: Icon(
icon,
color: const Color(0xff31708c),
size: 45,
),
),
const SizedBox(height: 4,),
Text(item.title,
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: const Color(0xff31708c)
),
textAlign: TextAlign.center,)
],
),
),
);
}
}
class Item{
String title;
bool isSelected;
Item({required this.title, this.isSelected = false});
}

How to add circular border to dialog in flutter?

How to add circular border for dialog box in a flutter?,I tried the below code but I can't able to get the desired output, I already added circular border but it's not working, I need circular border for dialog,Refer the expected output for details, please guide
My code :
`
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
])));
}
}
`
My expectation:
current output:
Just need to add ClipBehavior to Dialog.
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
clipBehavior: Clip.antiAlias, // add clipBehavior
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
]),
);
}
}
The issue was with the Container you used to wrap the other widgets, you can add specific border radius to each container to fix.
I added a demo and code to get what you wanted your output to look like:
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 340,
child: Column(
children: [
Container(
height: 60,
width: double.infinity,
padding: EdgeInsets.all(
15.0,
),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
15.0,
),
topRight: Radius.circular(
15.0,
),
),
),
child: Text(
'Baby Names',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
...List.generate(
5,
(index) => Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'List Names',
style: TextStyle(
fontSize: 18,
),
),
),
),
),
Divider(
color: Colors.grey[200],
thickness: 1.5,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(
fontSize: 18,
color: Colors.green,
),
),
),
),
],
),
),
);
}
}
RESULT:
You added RoundedRectangleBorder(),
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
padding: EdgeInsets.only(
top: 10.0,
bottom: 5,
left: 5,
right: 5,
),
margin: EdgeInsets.only(top: 5),
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min, // To make the card compact
children: <Widget>[
Text(
"Baby",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w700,
),
),
Divider(color: Colors.grey,),
SizedBox(height: 16.0),
Text(
"text",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
),
),
SizedBox(height: 24.0),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: () {
Navigator.of(context).pop(); // To close the dialog
},
child: Text("buttonText"),
),
),
],
),
),
);
}
}

ListView isn't scrolling in Flutter

ListView is not working here, Firstly instead of padding I used Positioned() but there is a similar issue on github and there I got to know that scrollable widget shouldn't be placed inside Positioned() so i replaced it with Padding(), but got no success.
here is my code
import 'package:flutter/material.dart';
import 'package:cpblog/webview.dart';
import 'package:flutter/rendering.dart';
class DetailsPage extends StatefulWidget {
final heroTag;
final foodName;
final url;
final text;
DetailsPage({this.heroTag, this.foodName,this.url,this.text});
#override
_DetailsPageState createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
var selectedCard = 'WEIGHT';
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF7A9BEE),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text('Here You Go!!',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 18.0,
color: Colors.white)),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
color: Colors.white,
)
],
),
body: ListView(children: [
Stack(children: [
Container(
height: MediaQuery.of(context).size.height - 82.0,
width: MediaQuery.of(context).size.width,
color: Colors.transparent),
Padding(
padding: const EdgeInsets.only(top: 75.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45.0),
topRight: Radius.circular(45.0),
),
color: Colors.white),
height: MediaQuery.of(context).size.height - 100.0,
width: MediaQuery.of(context).size.width),
),
Padding(
padding: EdgeInsets.only(top: 30.0,
left: (MediaQuery.of(context).size.width / 2) - 100.0,),
child: Hero(
tag: widget.heroTag,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(widget.heroTag),
fit: BoxFit.cover)),
height: 200.0,
width: 200.0)),
),
Padding(
padding: const EdgeInsets.only(top:250.0,right:25.0,left: 25.0),
child: ListView(
shrinkWrap: true,
children: <Widget>[
Text(widget.foodName,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 22.0,
fontWeight: FontWeight.bold)),
SizedBox(height: 20.0),
Text(widget.text,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
)),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 125.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17.0),
color: Color(0xFF7A9BEE)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => WebView(widget.url, widget.foodName)));
},
child:Text('View More',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat',
fontSize: 15.0)),
)
],
),
)
],
),
SizedBox(height: 20.0),
Container(
height: 150.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_buildInfoCard('WEIGHT', '300', 'G'),
SizedBox(width: 10.0),
_buildInfoCard('CALORIES', '267', 'CAL'),
SizedBox(width: 10.0),
_buildInfoCard('VITAMINS', 'A, B6', 'VIT'),
SizedBox(width: 10.0),
_buildInfoCard('AVAIL', 'NO', 'AV')
],
)
),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.only(bottom:5.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0), bottomLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
color: Colors.black
),
height: 50.0,
child:
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Center(
child: Text(
'Back',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat'
)
),
),
)
),
)
],
),
)
])
]));
}
Widget _buildInfoCard(String cardTitle, String info, String unit) {
return InkWell(
onTap: () {
selectCard(cardTitle);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.easeIn,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: cardTitle == selectedCard ? Color(0xFF7A9BEE) : Colors.white,
border: Border.all(
color: cardTitle == selectedCard ?
Colors.transparent :
Colors.grey.withOpacity(0.3),
style: BorderStyle.solid,
width: 0.75
),
),
height: 100.0,
width: 100.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 15.0),
child: Text(cardTitle,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color:
cardTitle == selectedCard ? Colors.white : Colors.grey.withOpacity(0.7),
)),
),
Padding(
padding: const EdgeInsets.only(left: 15.0, bottom: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(info,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 14.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
fontWeight: FontWeight.bold)),
Text(unit,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
))
],
),
)
]
)
)
);
}
selectCard(cardTitle) {
setState(() {
selectedCard = cardTitle;
});
}
}
I tried physics, listView.builder(),but everytime I get the same result.
Thank you in advance!!!!
Surround you ListView with Expanded widget.
You can't have a scrollable widget inside another scrollable widget without setting a proper height for the inner one. Or use ConstrainedBox

The method 'call' was called on null. Receiver: null Tried calling: call(navegacion_bloques)

give me some of your time please, I have this error "mainMenu().onMenuTap()" and I don't know how to fix it.
The following NoSuchMethodError was thrown while handling a gesture:
The method 'call' was called on null.
Receiver: null
Tried calling: call(navegacion_bloques)
in my StatelessWidget class it worked fine, but I passed everything to a Statefulwidget and I can't use this function.
My code is this:
import 'package:flutter/material.dart';
import 'package:example/bloc/navegacion_bloques/navegacion_bloques.dart';
import 'package:example/ui/pages/productos/categorias.dart';
import 'package:example/ui/pages/productos/productdetails.dart';
class mainMenu extends StatefulWidget with NavigationStates{
final Function onMenuTap;
const mainMenu({Key key, this.onMenuTap}) : super(key: key);
#override
_mainMenu createState() => _mainMenu();
}
class _mainMenu extends State<mainMenu>
{
final categorias= allCategories;
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: ClampingScrollPhysics(),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.deepPurple[300], Colors.deepPurpleAccent]
),
borderRadius:BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
),
padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 40),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children:[
InkWell(child: Icon(Icons.menu,color: Colors.grey[300],),
onTap:(){
mainMenu().onMenuTap();
},),
Text(
"",
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontFamily: 'BalooMedium'),
),
InkWell(child: Icon(Icons.shopping_cart,color: Colors.grey[300],),
onTap:(){
mainMenu().onMenuTap();
},),
],
),
SizedBox(
height: 5,
),
Container(
padding: const EdgeInsets.only(left: 10.0,right: 10.0),
child: Column(
children: <Widget>[
Row(
children:[
Text(
"store",
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontFamily: 'BalooMedium'),
)
],
),
Row(
children:[
Text(
"hi",
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontFamily: 'BalooMedium'),
)
],
),
Row(
children:[
Text(
"There!",
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontFamily: 'BalooMedium'),
)
],
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: EdgeInsets.only(left: 10.0,right: 10.0),
child: TextField(
style: TextStyle(
fontFamily: 'BalooMedium',
fontSize: 18.0,
color: Colors.grey[200],
),
decoration: InputDecoration(
prefixIcon: IconButton(icon: Icon(Icons.search,color: Colors.grey[200],),onPressed: null,),
hintText: '¿Qué Necesitas?',
hintStyle:TextStyle(
fontFamily: 'BalooMedium',
fontSize: 18.0,
color: Colors.grey[200],
),
suffixIcon: IconButton(icon: Icon(Icons.filter_list,color: Colors.grey[200],),onPressed: null,),
),
),
),
],
),
),
);
}
buildCategoriasGrid(Categorias categorias){
return GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
//builder: (context) => productdetails(selectedInstructor: categorias)
));
},
child: Padding(
padding: EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Container(
height: 150.0, width: 100.0, color: Colors.transparent),
Positioned(
left: 30.0,
top: 65.0,
child: Container(
height: 30.0,
width: 40.0,
decoration: BoxDecoration(boxShadow: [
BoxShadow(
blurRadius: 7.0,
color: Colors.grey.withOpacity(0.75),
offset: Offset(5, 25),
spreadRadius: 12.0)
]))),
Positioned(
left: 12.0,
top: 15.0,
child: Hero(
tag: categorias.productImg,
child: Container(
height: 110.0,
width: 85.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
image: DecorationImage(
image: AssetImage(categorias.productImg),
fit: BoxFit.cover))))),
Positioned(
left: 22.0,
top: 138.0,
child: Column(
children: <Widget>[
Text(categorias.productName,
style: TextStyle(
fontFamily: 'BalooMedium',
fontSize: 10.0,
color: Colors.grey[200],
),),
Row(children: [
Icon(
Icons.star,
color: Colors.grey.withOpacity(0.5),
size: 15.0,
),
SizedBox(width: 3.0),
Text(categorias.productRating,
style: TextStyle(
fontFamily: 'BalooMedium',
fontSize: 10.0,
color: Colors.grey[200],
),)
])
],
))
],
)));
}
}
Replace
mainMenu().onMenuTap()
with
widget.onMenuTap()
Calling mainMenu() just creates a new instance of the mainMenu class without the corresponding information so onMenuTap() is null.
The widget property is the "State object's configuration [which] is the corresponding StatefulWidget instance." Source
So the widget property, when used in the State object, contains the information you need so onMenuTap() would contain the supplied argument.

trigger flutter IconButton ripple animation programmtically?

Is there a way to programmatically trigger the IconButton ripple animation? The following is some code:
#override
Widget build(BuildContext context) {
return Material(
child: Container(
margin: EdgeInsets.only(top: 12, left: 18, right: 18),
padding: EdgeInsets.only(top: 8, bottom: 8),
decoration: BoxDecoration(
color: _bgColor,
border: new Border.all(color: _bgColor),
borderRadius: BorderRadius.all(Radius.circular(
10.0) // <--- border radius here
),
),
child: Row(children: [
IconButton(
padding: EdgeInsets.only(right: 16),
icon: Icon(Icons.play_arrow, color: Colors.white, size: 48),
tooltip: 'Start ${issue.issueName}',
onPressed: () {},
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(bottom: 8),
child: Text(
issue.title,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
softWrap: true,
),
),
Text(
issue.issueName,
style: TextStyle(
color: Colors.white,
),
),
],
),
),
])));
}