Flutter invalid refrence to 'this' expression - flutter

i am trying to add item in list when i click on add button, all code is ok, but i am getting error invalid reference to this expression. i am using stateful widget.
List<Widget> _listSection = [];
body: Container(
child: Stack(
children: [
FloatingActionButton(
onPressed: () {
_listSection.add(
listSectionMethod(
"title three", "hello from click", Icons.forward),
);
setState(() {});
},
),
],
),
),
),
);
}
}
Widget listSection = Container(
margin: EdgeInsets.only(top: 210),
child: ListView(
children: [
Column(
children: [
Column(
children: this._listSection, // ----> ERROR HERE
),
],
),
],
),
);
List Section Method:
Card listSectionMethod(String title, String subtitle, IconData icon) {
return new Card(
child: ListTile(
title: Text(
title,
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text(subtitle),
trailing: Icon(
icon,
color: Colors.blue,
),
),
);
}

change this:
Widget listSection = Container(
margin: EdgeInsets.only(top: 210),
child: ListView(
children: [
Column(
children: [
Column(
children: this._listSection,
),
],
),
],
),
);
for this:
Widget listSection() {
return Container(
margin: EdgeInsets.only(top: 210),
child: ListView(
children: [
Column(
children: this._listSection,
),
],
),
);
}

Related

Flutter Getx arguments is always returning null

I am using Getx package in flutter to pass data to another page.
But I am getting null data from the page.
this is my code to get.to
Get.to(xreadArticlePage(),transition: Transition.rightToLeft, arguments: 'dataExample');
this my code to get data from previous page. data is my data variable. xreadArticlePage is my page to get data.
Text(data.toString()),
this is to get previous page data. it has a to string because see the data without error for now
class xreadArticlePage extends StatelessWidget {
#override
var data = Get.arguments;
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Get.back();
},
child: Icon(Icons.arrow_back_ios)),
Icon(Icons.abc_outlined),
],
),
),
Expanded(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
child: Container(
child: FutureBuilder<List<dynamic>>(
future: fetch1WpPosts(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text(
snapshot.data![0]["title"],
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
Image.network(
snapshot.data![0]["featured_image_large"]),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
snapshot.data![0]["date"],
),
Text(data.toString()),
],
),
Html(data: snapshot.data![0]["content"]),
],
),
);
}
return CircularProgressIndicator();
}),
),
),
),
],
),
);
}
}
Use below code:
Get.toNamed(Routes.ADD_ADDRESS_SCREEN, arguments: {
'address': 'abc',
'city': 'xyz',
});

Flutter - How to make the first element of a dynamic list fixed (unscrollable) at top?

PopupMenuButton<String>(
///Icon
child: SizedBox(
child: Stack(
children: [
const Icon(
Icons.notifications_outlined,
),
Container(
child: Container(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Center(
child: Text(
''
),
),
),
),
)
],
),
),
onSelected: (value) {},
itemBuilder: (BuildContext context) {
///generating list on the fly
var myList = someList!.map((listItem) {
return PopupMenuItem<String>(
value: listItem.id.toString(),
child: SizedBox(
child: Column(
children: [
Text(
listItem.name!,
),
],
),
),
);
}).toList();
var closeButtonList = [
PopupMenuItem<String>(
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: IconButton(
onPressed: Navigator.of(context).pop,
icon: const Icon(
Icons.close,
),
),
),
],
),
),
///appending list using spread operator
...myList
];
return closeButtonList;
},
This code works fine and displays a cross(close) icon as the first element of the list.
The problem is when I scroll the list, the icon get scrolled and disappears from the screen.
How can I make it fixed while the rest of the list is scrollable?

Why does this row don't wrap in flutter

What the problem is I have to render some texts which are in a row and also it should wrap when it doesn't have enough space but the row does not wrap.
I have used wrapping it Expanded, Wrap, and tried some stackoverflow answers but none of them work
Below is my code for it
Widget xyz(List _list) {
return Padding(
padding: const EdgeInsets.fromLTRB(50, 10, 40, 10),
child: InkWell(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Title : ',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
),
Wrap(children: [
Row(children: [
for (int i = 0; i < _list.length; i++)
Container(
padding: const EdgeInsets.only(right: 8),
child: Text(
'${_list[i]}',
style: TextStyle(fontSize: 13),
),
),
]),
]),
],
),
),
);
}
class _Page3State extends State<Page3> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
xyz([
'Text1',
'Text2',
'Text3',
'Text4',
'Text5',
'Text6',
'Text7',
]),
//other widgets
],
),
);
}
}
And this is the output I am getting
I want the 'Text6' & 'Text7' Text widgets to go on the next line.
This is a working example:
The issues are incorrect Flexible (Expanded) placing, and your Wrap had a Row child instead of directly placed children.
Widget xyz(List _list) {
return Padding(
padding: const EdgeInsets.fromLTRB(50, 10, 40, 10),
child: InkWell(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Title : ',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
),
Flexible(
child: Wrap(
children: [
for (int i = 0; i < _list.length; i++)
Container(
padding: const EdgeInsets.only(right: 8),
child: Text(
'${_list[i]}',
style: TextStyle(fontSize: 13),
),
),
],
),
),
],
),
),
);
}
class _Page3State extends State<Page3> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
xyz([
'Text1',
'Text2',
'Text3',
'Text4',
'Text5',
'Text6',
'Text7',
]),
//other widgets
],
),
);
}
}

How to make image layout inside card like this?

I receive a list of images from api call, I need to layout these images like on this example, I have already implemented this logic, but I think it is redundant, and can be done easier, without hard-coded which item need to be first, last, etc.. and I think that widget tree could be less. How I can improve this code?
my emplementation:
List<Widget> _listImages() {
List<Widget> imagesList = [];
for (int i = 0; i < images.length; i++) {
imagesList.add(
Expanded(
child: Padding(
padding: const EdgeInsets.all(2.0),
child: GestureDetector(
onTap: () {
open(context);
},
child: child: NetworkImage(images[i]),
),
),
);
);
}
return imagesList;
}
Widget build(BuildContext context) {
return Card(...
Column(//Image layout
children: [
Row(
children: [
_listImages().first,
],
),
Container(
height: 110,
child: Row(
children: [
Expanded(
flex: 2,
child: Row(
children: _listImages().getRange(1, 3).toList(),
),
),
Expanded(
child: Stack(children: [
Row(
children: [
_listImages().elementAt(3),
],
),
IgnorePointer(
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
color: Colors.black54,
child: Center(
child: Text(
'+ ${_listImages().length - 3}',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w500),
),
),
),
),
),
]),
),
],
),
),
],
)
....
}
You could try Gridview. You can use main axis spacing and cross axis spacing to change the distance between grid tiles.
https://www.geeksforgeeks.org/flutter-gridview/

How can I make the table take the available space along the height?

I have the following table
#override
Widget build(BuildContext context){
final TheGroupPageArguments arguments = ModalRoute.of(context).settings.arguments;
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
children: [
Flexible(
flex: 1,
child: Align(
alignment: Alignment.center,
child: DigitalSpeedMeter(),
),
),
Flexible(
flex: 6,
child: Table(
children: [
TableRow(children: [backButton(), backButton(), backButton()]),
TableRow(children: [backButton(), backButton(), backButton()]),
],
),
),
]
),
),
);
}
But it only takes half the screen height. How can I make it strecht to it's parent's height?
This is how it looks now
This is what it should look like
This is what it should look like
You can use the "Expanded" instead of "Flexible".
I can't find a good solution.
Anyone know a good way?
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.yellow,
child: Align(
alignment: Alignment.center,
child: Text(
'0\nMPH',
textAlign: TextAlign.center,
),
),
),
),
Expanded(
flex: 6,
child: Column(
children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: FlatButton(
onPressed: () {},
color: Colors.tealAccent,
child: Text("button1"),
),
),
Expanded(
child: FlatButton(
onPressed: () {},
color: Colors.green,
child: Text("button2"),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.grey,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: FlatButton(
onPressed: () {},
color: Colors.blue,
child: Text("button3"),
),
),
Expanded(
child: FlatButton(
onPressed: () {},
color: Colors.amber,
child: Text("button4"),
),
),
],
),
),
),
],
),
),
],
),
),
);
}
I found a solution. How about this?
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20.0),
child: Column(children: [
Flexible(
flex: 1,
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.yellow,
child: Align(
alignment: Alignment.center,
child: Text(
'0\nMPH',
textAlign: TextAlign.center,
),
),
),
),
),
Flexible(
flex: 6,
child: Table(
children: [
TableRow(children: [backButton(), backButton(), backButton()]),
TableRow(children: [backButton(), backButton(), backButton()]),
],
),
),
]),
),
);
}
Widget backButton() {
return Container(
height: MediaQuery.of(context).size.height / 7 * 6 / 2 - 7,
child: FlatButton(
onPressed: () {},
color: Colors.tealAccent,
child: Text("button"),
),
);
}
I ended up doing the following. A widget that makes the rows and columns dynamically based on the the widgets put into it.
import 'package:flutter/material.dart';
class ExpandingGrid extends StatelessWidget {
final List<Widget> tiles;
final int columns;
const ExpandingGrid({this.tiles, this.columns});
int _rows(){
return (tiles.length / columns).ceil();
}
int _tileIndex(int row, int column) => row * columns + column;
Widget _gridTile(int row, int column){
if(_tileIndex(row, column) < tiles.length)
{
return Expanded(
child: tiles[_tileIndex(row, column)],
);
}
return Spacer();
}
#override
Widget build(BuildContext context) {
return Column(
children:
[
for(int r = 0; r < _rows(); r++ )
Expanded(
child: Row
(
children :
[
for(int c = 0; c < columns; c++)
_gridTile(r, c),
]
),
)
]
);
}
}