Changing Text Color onTap, Flutter - ios

I am an android developer new to flutter and i am trying to create 3 grey text widgets where when a user clicks one, the clicked one becomes blue while the others remain grey. This is the code i currently have
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const <Widget>[
InkWell(
child: Text('Click 3',
style: TextStyle(
color: Colors.indigo,
fontSize: 15.0,
fontWeight: FontWeight.bold,
)),
onTap: () => Colors.blue,
),
InkWell(
child: Text('Click 2',
style: TextStyle(
color: Colors.indigo,
fontSize: 15.0,
fontWeight: FontWeight.bold,
)),
onTap: () => Colors.blue,
),
InkWell(
child: Text('Click 3',
style: TextStyle(
color: Colors.indigo,
fontSize: 15.0,
fontWeight: FontWeight.bold,
)),
onTap: () => Colors.blue,
),
],
),
Also whatever i put in onTap() i get the error that says
invalid constant value

You should create three separate variables for each button's color and then remove the const keyword in Row,
Color firstColor = Colors.indigo;
Color secondColor = Colors.indigo;
Color thirdColor = Colors.indigo;
...
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[ /// remove const keyword
InkWell(
child: Text('Click 3',
style: TextStyle(
color: firstColor,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
onTap: (){
setState((){
firstColor=Colors.blue;
});
},
),
InkWell(
child: Text('Click 2',
style: TextStyle(
color: secondColor,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
onTap: (){
setState((){
secondColor=Colors.blue;
});
},
),
InkWell(
child: Text('Click 3',
style: TextStyle(
color: thirdButton,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
onTap: (){
setState((){
thirdColor=Colors.blue;
});
},
),
],
),

Related

Flutter page is not scrollable: How to scroll when more than one widget?

I am trying to make my page scrollable but I didn't manage it. What I tried so far is to use SingeChildScrollView, ListView and ScrollView...
Everytime I use one of these an error occurs. How can I manage this?
Is there any alternative to use those three options?
I am new to flutter and what I googled so far didn't work because I could only find solutions with one of these three scrolling options.
Thank you!
This is my code:
class LadevorgangScreen extends StatefulWidget {
#override
_LadevorgangScreen createState() => _LadevorgangScreen();
}
#override
class _LadevorgangScreen extends State<LadevorgangScreen> {
//class LadevorgangScreen extends StatelessWidget {
PageController pageController = PageController(initialPage: 0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Ladevorgang'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFBD23E), Color(0xffF6BE03)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
),
),
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 15, 10, 45),
child: FlatButton(
onPressed: () {},
color: Colors.blue,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'FAQs:\n',
style: TextStyle(
fontFamily: 'Avenir',
fontSize: 22.0,
fontWeight: FontWeight.w900,
decoration: TextDecoration.underline,
color: Color(0xff232323),
),
children: [
TextSpan(
text: 'Ladevorgang des Elektroautos',
style: TextStyle(
fontFamily: 'Avenir',
fontSize: 20.0,
fontWeight: FontWeight.w500,
decoration: TextDecoration.none,
color: Color(0xff232323)),
),
],
),
),
),
),
Flexible(
child: Text(
'Zu Hause laden',
style: TextStyle(
fontSize: 18.5,
fontFamily: 'Avenir',
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: Column(
children: [
Row(
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 12, 7, 12),
child: Icon(
Icons.circle_outlined,
size: 15.0,
color: Color(0xffF6BE03),
),
),
Flexible(
child: Text(
"Wie lade ich zu Hause?",
style:
TextStyle(fontSize: 17.0, fontFamily: 'Avenir'),
),
),
],
),
Row(
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 12, 7, 12),
child: Icon(
Icons.circle_outlined,
size: 15.0,
color: Color(0xffF6BE03),
),
),
Flexible(
child: Text(
"Benötige ich überhaupt eine Lademöglichkeit zu Hause?",
style: TextStyle(
fontSize: 17.0, fontFamily: 'Avenir')),
),
],
),
],
),
),
],
),
),
);
}
}
JUST WRAP your main widget OF BODY in SingleChildScrollView widget
body: SingleChildScrollView(
child: Container(
decoration: BoxDecoration
.....
..
.

Text Widget within Appbar leading property - but it's not displaying correctly

I want to use Appbar with text "Back" button I a using below code but
"Back" is coming in two line like below, also Appbar title is moving down side.
Ba
ck
Flutter code for same
final topAppBar = AppBar(
// elevation: 0.1,
backgroundColor: Color.fromRGBO(0, 113, 188, 1.0),
title: Text(
"MyAppBar",
style: TextStyle(
color: Colors.white,
fontFamily: 'Raleway-ExtraBold',
fontWeight: FontWeight.w900,
fontSize: 20.0,
),
),
leading: Padding(
padding: const EdgeInsets.only(left: 0),
child: FlatButton(
child: Text(
"Back",
// textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.white,
fontFamily: "Raleway-Medium",
fontSize: 14.0,
),
),
),
),
);
Is there any thing which I am missing here??
Use - FittedBox - fit: property to adjust leading widget.
leading: FittedBox(
fit: BoxFit.cover,
child: FlatButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // add this to remove padding.
onPressed: () {},
child: Text(
"Back",
// textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.white,
fontFamily: "Raleway-Medium",
fontSize: 14.0,
),
),
),
),
Use leadingWidth with enough width.
leadingWidth: 80,
leading: Padding(
padding: const EdgeInsets.only(left: 0),
child: FlatButton(
child: Text(
"Back",
// textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.white,
fontFamily: "Raleway-Medium",
fontSize: 14.0,
),
),
),

How to give onTap functionality to a container which is wrapped in a Listview

I have a list of containers wrapped in a listview, I need to give a onTap functionality like when the user taps on the container it should give me a value of that particular container, below is my code and I tried using Inkwell function but it throws an error saying vertical portview. Help me out and thanks in advance.
dynamic _allVehiclesDataView = new ListView(
children: List.generate(this._allVehiclesData.length,
(i) => new Container(
decoration: new BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey[300]),
),
),
padding: const EdgeInsets.all(32.0),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(bottom:5.0),
child: Text(
this._allVehiclesData[i]["vehicle"]["registration"],
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
),
),
Text(
'Location :',
style: TextStyle(
fontSize: 15.0,
color: Colors.grey,
),
),
Text(
(this._allVehiclesData[i]["address"] == null ||
this._allVehiclesData[i]["address"] == 'Not determined') ?
"No data available" : ""+this._allVehiclesData[i]["address"]["LongLabel"],
style: TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.bold,
),
),
Text(
'Last known update :',
style: TextStyle(
fontSize: 15.0,
color: Colors.grey[500],
),
),
Text(
(this._allVehiclesData[i]["deviceTime"]),
style: TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.bold,
),
),
this._allVehiclesData[i]["fuel"] != "null"?
new Row(
children: <Widget>[
Text(
'Fuel Level :',
style: TextStyle(
fontSize: 15.0,
color: Colors.grey[500],
),
),
new Container(
decoration: new BoxDecoration(
shape : BoxShape.circle,
border: new Border.all(
color: Colors.blue[300],
width: 5.0,
)
),
),
Text(
(this._allVehiclesData[i]["fuel"].toString()),
style: TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.bold,
),
),
],
) : Text(''),
this._allVehiclesData[i]["temperature"] != "null" ?
new Row(
children: <Widget>[
Text(
'Temp :',
style: TextStyle(
fontSize: 15.0,
color: Colors.grey[500],
),
),
new Container(
decoration: new BoxDecoration(
shape : BoxShape.circle,
border: new Border.all(
color: Colors.red[300],
width: 5.0,
)
),
),
Text(
(' '+this._allVehiclesData[i]["temperature"].toString()+' C'),
style: TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.bold,
),
),
],
):Text(""),
],
),
),
status(i),
// new InkWell(),
],
),
),
),
);
You can use the GestureDetector for the same
Wrap your Container in a GestureDetector with an onTap callback
GestureDetector(
// When the child is tapped, do your work
onTap: () {
...
...
},
// Container
child: Container(
...
),
);

Flutter listview items are going out of view.

My Listview items are going out of the view and showing in ListTile that is below my Listview, I am not getting what I am doing wrong in my code. Please have a look at below images, you can see ending point of list view and in another image my items are going out of this ending point. I am posting my code below, please have a look and help me to resolve this issue.
Here is my Listview items are going out of the view.
Below is the code:
class _CartFinalSummaryState extends State<CartFinalSummary> {
final cartSummary = new StoreConnector<List<CartItem>, List<CartItem>>(
converter: (store) => store.state,
builder: (context, list) => new Padding(
padding: const EdgeInsets.all(8.0),
child: new Container(
margin: new EdgeInsets.only(top: 5.0, left: 5.0, right: 5.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"Quantity: (${getTotalQuantity(list)})",
style: new TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w700
),
),
],
),
),
),);
final listCartItem = new StoreConnector<List<CartItem>,
List<CartItem>>(
converter: (store) => store.state,
builder: (context, list) => new Container(
child: new Flexible(
child: new Stack(
children: <Widget>[
new ListView.builder(
scrollDirection: Axis.vertical,
itemCount: list ==0 ? null : list.length,
itemBuilder: (context, index){
return new Column(
children: <Widget>[
new ListTile(
title: new Text(
list[index].product
.name.toString(),
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 18.0),),
subtitle: new Text(list[index].quantity.toString()
+ " x " + list[index].product.price.toString()),
trailing: new Text("€"+(list[index].product.price *
list[index].quantity).toString(),
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 18.0)),
),
new Divider(
)
],
);
}),
],
),
),
));
#override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar: new GestureDetector(
onTap: () {
/*Navigator.push(
context,
new MaterialPageRoute(builder: (context) =>
new SelectTable()));*/
},
child:new StoreConnector<List<CartItem>, List<CartItem>>(
converter: (store) => store.state,
builder: (context, list) => new Container(
padding: const EdgeInsets.all(10.0),
color: Colors.green,
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new GestureDetector(
child: new Text("Proceed to Pay ${
"( €"+getTotal(list).toStringAsFixed(2)+" )"}", style:
new TextStyle(
color: Colors.white,
fontSize: 18.0),),
)
],
)
)),
),
appBar: new AppBar(
iconTheme: new IconThemeData(color: Colors.white),
title: new Text('Cart Summary', style: new TextStyle(
color: Colors.white
),),
),
body: new Container(
child: new Column(
children: <Widget>[
cartSummary,
new Divider(
color: Colors.black,
height: 3.0,
),
listCartItem,
new Divider(
color: Colors.black,
height: 5.0,
),
new ListTile(
title: new Text("Table Selected",
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 18.0)),
trailing: new Text("5",
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 18.0)),
),
new Divider(
color: Colors.black,
),
new ListTile(
title: new Text("Sub Total",
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 18.0)),
trailing: new Text("5",
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 18.0)),
),
],
),
),
);
}
}
I've resolved the issue by replacing this piece of code. I am still not sure what was the problem, I think the ListTiles that I was using were transparent, I've used ListTile as child of Container widget and set the background color of container.
new Divider(
color: Colors.black,
height: 0.1,
),
new Container(
color: const Color(0xFFD6D6D6),
child: new ListTileTheme(
child: new ListTile(
onTap: (){
Navigator.pushReplacement(
context,
new MaterialPageRoute(builder: (context) =>
new SelectTable()));
},
title: new Text("Table Selected",
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 17.0)),
trailing: new Text(widget.tableNumber.toString(),
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 17.0)),
),
),
),
new Divider(
height: 0.1,
color: Colors.black,
),
new Container(
color: const Color(0xFFD6D6D6),
child: new ListTile(
title: new Text("Grand Total",
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 17.0)),
trailing: new Text("€"+getTotal(list).toString(),
style: new TextStyle(fontWeight: FontWeight.bold,
fontSize: 17.0)),
),
),

Building a card widget [Flutter]

I am trying to build my own card within flutter however I keep getting the error of child not being defined.
The type of card I am trying to build can be seen here
Is it also possible to link me to a tutorial that properly explains when to use child and children as this seems to be my issue at this time.
My code can be seen below:
List<Widget> cardlist = <Widget>[
new Card(
child: new Column(
children: <Widget>[
new Row(
child: new CircleAvatar(
backgroundImage: new AssetImage('images/pic.jpg'),
radius: 100.0,
),
)
],
child: new Row(
child: new CircleAvatar(
backgroundImage: new AssetImage('images/pic.jpg'),
radius: 100.0,
),
child: new Text(
'News Location',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
child: new Image.asset(
'images/lake.jpg',
height: 240.0,
fit: BoxFit.cover,
),
child: new Text(
'News Headline',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
child: new Text(
'News Summary',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
child: new Row(
child: new CircleAvatar(
backgroundImage: new AssetImage('images/pic.jpg'),
radius: 100.0,
),
child: new Text(
'News Source',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
child: new Text(
'12 hours ago',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
)
];
I think you want something like what I have below, not sure it is exactly right but it should give you a starting point. Basically you need to understand when to use child and when children, and the correct syntax. just think about the widget you are using and if it could contain one (child) or more than one (children) child widgets, or look at the docs to see what it takes :)
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Card(
child: new Column(
children: [
new Row(
children: [
new CircleAvatar(
backgroundImage: new AssetImage('images/pic.jpg'),
radius: 100.0,
),
]
),
]
),
),
new Card(
child : new Row(
children : [
new CircleAvatar(
backgroundImage: new AssetImage('images/pic.jpg'),
radius: 100.0,
),
new Text(
'News Location',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
]
),
),
new Card(
child: new Column(
children: [
new Image.asset(
'images/lake.jpg',
height: 240.0,
fit: BoxFit.cover,
),
new Text(
'News Headline',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
new Text(
'News Summary',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
new Row(
children : [
new CircleAvatar(
backgroundImage: new AssetImage('images/pic.jpg'),
radius: 100.0,
),
new Text(
'News Source',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
new Text(
'12 hours ago',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
]
),
]
),
),
],
),
),

Resources