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

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?

Related

How to change tab programmatically on BottomAppBar flutter?

I am working on a flutter application where I need to change my tab programmatically, here If I came on the last screen of the stack then I need to redirect to the first tab programmatically instead of closing the app.
Please consider the following code snnipet:
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = HomeFragment();
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFF3F5F9),
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Container(
width: double.infinity,
height: 15.5,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
currentScreen = HomeFragment();
currentTab = 0;
});
},
child: Expanded(
child: Container(
height: 15.5,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/home.png',
color: currentTab == 0 ? Color(0xFF193F70) : Color(0xFFABAAAA),
),
SizedBox(
height: 3.0,
),
Text(
'Home',
),
],
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
redirectToLogin();
});
},
child: Expanded(
child: Container(
height: 15.5,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/login_icon.png',
color: currentTab == 1 ? Color(0xFF193F70) : Color(0xFFABAAAA),
),
SizedBox(
height: 3.0,
),
Text(
'Login',
),
],
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
redirectToSignUp();
});
},
child: Expanded(
child: Container(
height: 15.5,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/signup_icon.png',
color: currentTab == 2 ? Color(0xFF193F70) : Color(0xFFABAAAA),
),
SizedBox(
height: 3.0,
),
Text(
'SignUp',
),
],
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
currentScreen = ProfileFrag();
currentTab = 3;
});
},
child: Expanded(
child: Container(
height: 15.5,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/menu_icon.png',
color: currentTab == 3 ? Color(0xFF193F70) : Color(0xFFABAAAA),
),
SizedBox(
height: 3.0,
),
Text(
'Menu',
),
],
),
),
),
),
],
),
),
),
);}
Here I am looking for something that can redirect to a different tab programmatically. Also please let me know if I am doing something wrong here.

I believe it would be better to use a real Flutter TabBar. Have you considered this solution?
There is a complete tutorial on this blog : https://blog.logrocket.com/flutter-tabbar-a-complete-tutorial-with-examples/
It includes a way to change tabs programmatically. This is actually what I am trying to do with my own app.
Let me know if this could work for you.

Align Persistentfooterbutton of Scaffold to the right side

I want to display a List and beneath it a Persistent footer, a Column with some rows. I use persistentFooterButtons of Scaffold.
The closest to what I get is this:
But I am unable to align the fields to the right.
When I work with Align or Spacer, the Widgets disappear.
The content of persistentFooterButtons.
FittedBox(
child: Column(
children: <Widget>[
FlatButton(
onPressed: () {
Navigator.pushNamed(context, RouteName.BAUSTELLEN);
},
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Bestellen'),
),
),
Row(
children: <Widget>[
Text('$priceInfo '),
MyFutureBuilder(
future: sum,
builder: (context, double sum) {
var mySum = formatDoubleNumber(sum);
return Text('$mySum');
},
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
Row(
children: <Widget>[
Text('Ihr Einkaufsrahmen '),
Text(
'$einkaufsrahmen',
style: TextStyle(
color: einkaufsrahmen == 0 ? Colors.red : Colors.black),
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
],
),
);
If I put the elements directly to persitentFooterButtons, this is what I get, the text is scattered around and my list is not shown.
and the Code
Scaffold(
body: WarenkorbListe(),
persistentFooterButtons: <Widget>[
// WarenkorbFooter(),
FlatButton(
onPressed: () {
Navigator.pushNamed(context, RouteName.BAUSTELLEN);
},
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Bestellen'),
),
),
Row(
children: <Widget>[
Text('$priceInfo '),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
Row(
children: <Widget>[
Text('Ihr Einkaufsrahmen '),
Text(
'$einkaufsrahmen',
style: TextStyle(
color: einkaufsrahmen == 0 ? Colors.red : Colors.black),
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
],
);

Try to align with your column instead
FittedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end, // this
children: <Widget>[

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),
]
),
)
]
);
}
}

Flutter invalid refrence to 'this' expression

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,
),
],
),
);
}

Loop Cards Flutter

I have been researching Flutter and a question arose --
I have an array with some information, and I need to add cards based on this array.
Currently, I create a loop and add the cards which follow the structure of my array and my program listed below. Note that when I call statement passing the parameters, the code runs without any problem, but the following code does not work for me:
import "package:acessorias/pages/global.variables.dart";
import "package:flutter/material.dart";
class Comunicados extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Center(
child: SizedBox(
width: 150,
child: Image.asset("assets/image/logo.png"),
),
),
actions: <Widget>[
Container(
width: 60,
child: FlatButton(
child: Icon(
Icons.search,
color: Color(0xFFBABABA),
),
onPressed: () => {},
),
),
],
),
body: Container(
color: Color(0xFFF2F3F6),
child: ListView(
children: <Widget>[
comunicado(comunicados[0]["LogNome"], comunicados[0]["EmComDTH"],
comunicados[0]["EmComDesc"]),
comunicado(comunicados[1]["LogNome"], comunicados[1]["EmComDTH"],
comunicados[1]["EmComDesc"]),
comunicado(comunicados[2]["LogNome"], comunicados[2]["EmComDTH"],
comunicados[2]["EmComDesc"]),
comunicado(comunicados[3]["LogNome"], comunicados[3]["EmComDTH"],
comunicados[3]["EmComDesc"]),
comunicado(comunicados[4]["LogNome"], comunicados[4]["EmComDTH"],
comunicados[4]["EmComDesc"]),
comunicado(comunicados[5]["LogNome"], comunicados[5]["EmComDTH"],
comunicados[5]["EmComDesc"])
],
),
),
);
}
}
Widget comunicado(user, data, msg) {
return Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage: AssetImage("assets/image/foto.png"),
),
title: new Text(user),
subtitle: Text(data),
trailing: Icon(Icons.more_vert),
),
/*Container(
child: Image.asset("assets/image/post.png"),
),*/
Container(
padding: EdgeInsets.all(10),
child: Text(msg),
),
ButtonTheme.bar(
child: ButtonBar(
children: <Widget>[
FlatButton(
child: Icon(Icons.favorite),
onPressed: () {},
),
FlatButton(
child: Icon(Icons.share),
onPressed: () {},
),
],
),
),
],
),
);
}
Solution
body: ListView.builder(
itemCount: comunicados.length,
itemBuilder: (context, index) {
/*return ListTile(
title: Text('${comunicados[index]}'),
);*/
return comunicado(comunicados[index]['LogNome'],
comunicados[index]["EmComDTH"], comunicados[index]["EmComDesc"]);
},
),

You can use data model in another dart file like Comunicado.dart
class Comunicado{
String user;
String data;
String msg;
Comunicado(
{this.user, this.data, this.msg});
}
after that you can make list of data model with the static data or etc like
List getComunicado(){
return[
Comunicado(
user: comunicados[0]["LogNome"],
data: comunicados[0]["EmComDTH"],
msg: comunicados[0]["EmComDesc"],
),
Comunicado(
user: comunicados[1]["LogNome"],
data: comunicados[1]["EmComDTH"],
msg: comunicados[1]["EmComDesc"],
),
]
}
in my case, i put it into initial state and don't forget to declare comm
#override
void initState() {
super.initState();
comm= getComunicado();
}
for custom card
Card makeCard(Comunicado newComm) => Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage: AssetImage("assets/image/foto.png"),
),
title: new Text("${newComm.user}"),
subtitle: Text("${newComm.data}"),
trailing: Icon(Icons.more_vert),
),
/*Container(
child: Image.asset("assets/image/post.png"),
),*/
Container(
padding: EdgeInsets.all(10),
child: Text("${newComm.msg}"),
),
ButtonTheme.bar(
child: ButtonBar(
children: <Widget>[
FlatButton(
child: Icon(Icons.favorite),
onPressed: () {},
),
FlatButton(
child: Icon(Icons.share),
onPressed: () {},
),
],
),
),
],
),
);
and for last you can call make card on listview
ListView.builder(
scrollDirection: Axis.vertical,
itemCount: comm.length,
itemBuilder: (BuildContext context, int index) {
return makeCard(comm[index]);
},
),