this is my code:
#override
Widget build(BuildContext context) {
return ListView(children: [
Card(
child: Row(
children: [
ListTile(
title: Text(publicacion.title),
subtitle: Text(publicacion.body),
)
],
)),
]);
}
Surely it is some overflow, but I couldn't fix it, I can't find the way .. I tried to implement ListView.builder, but I wouldn't be knowing where to fit it
Try to add your Inside Row widgets wrap it with Expanded or Flexible refer my answer here or here or here hope its helpful to you
Refer Expanded here
Try below code hope its helpful to you.
ListView(
shrinkWrap: true,
children: [
Card(
child: Row(
children: [
Expanded(
child: ListTile(
title: Text(
'publicacion.titlepublicacion.titlepublicacion.titlepublicacion.titlepublicacion.titlepublicacion.title'),
subtitle: Text(
'publicacion.bodypublicacion.titlepublicacion.titlepublicacion.titlepublicacion.titlepublicacion.titlepublicacion.title'),
),
)
],
),
),
],
),
Your Result Screen->
The Row widget is creating this problem, just remove Row Widget and it should work fine.
#override
Widget build(BuildContext context) {
return ListView(children: [
Card(
child: ListTile(
title: Text(publicacion.title),
subtitle: Text(publicacion.body),
)),
]);
}
Related
hello there i want to add another one listview on the same screen, how can i do that?
hello there i want to add another one listview on the same screen, how can i do that?
here is my code:
return Scaffold(
appBar: AppBar(title: Text('detailsPage'),
),
body: ListView(
children: [
Card(
child: ListTile(
title:new Center(child:new Text(utf8.decode(appController.userName.runes.toList()) + " " + utf8.decode(appController.userSurname.runes.toList()))),
subtitle:new Center(child:new Text('UserID: '+appController.userid.toString())),
)
),
Card(
child: ListTile(
title:new Center(child:new Text(months[index])),
subtitle:new Center(child:new Text("This month you have done "+appController.Totaleachlength[index].toString()+' charges')),
),
),
Card(
child: ListTile(
title:new Center(child:new Text(appController.Totaleachlist[index].toStringAsFixed(3)+"€")),
subtitle:new Center(child:new Text("Total amount")),
)
),
ElevatedButton(child: Text('Download Bill pdf'),
onPressed: () => ''),
ListTile(
title: new Center(child: new Text('Details of your charges'),),
),
],
shrinkWrap: true,
),
);
if you want to divide your screen, you can use Column
return Scaffold(
appBar: AppBar(title: Text('detailsPage'),),
body : Column(
children: [
Expanded(flex: 2 // you can customize as you need
child: ListView()
),
Expanded(flex: 3 // you can customize as you need
child: ListView()
),
])
Column:(
children: [
ListView1(),
ListView2(),
]
),
If each list didnt scroll, wrap your each one with SingleChildScrollView and if you like to listviews expand all height you can use Expanded
You can also add your another ListView at last child like
ListView:(
children: [
Card()
ListView()
]
)
You have to use shrinkWrap in your child ListView to extend the size in the screen
dont forget to add ClampingScrollPhysics to scroll from parent pehavior
class NestedListView extends StatelessWidget {
const NestedListView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
...List.generate(
20, (index) => Text('Parent List View Index $index')),
ListView(
/// * [ClampingScrollPhysics], which provides the clamping overscroll behavior
physics: const ClampingScrollPhysics(),
/// * [shrinkWrap], which provides the Max size of list in screen
shrinkWrap: true,
children: List.generate(
20, (index) => Text('List View ONE Index $index')),
),
ListView(
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
children: List.generate(
20, (index) => Text('List View Two Index $index')),
),
],
),
);
}
}
does anyone know how to solve it so that there is no border between two elements in a column in the website? Thanks for any advice
Image
Code Here
class DesktopScreen extends StatelessWidget {
const DesktopScreen({super.key});
#override
Widget build(BuildContext context) {
return Sizer(
builder: (context, orientation, deviceType) {
return Scaffold(
body: Column(
children: [
Container(color: HexColor("#111340"), height: 5.h, child: Row(children: [],),),
Container(color: HexColor("#111340"), height: 95.h,)
],
)
);
}
);
}
}
I'm a newbie, so I apologize for any mistakes in the post
I don't think there's any error in the code you posted, the little space between the elements should not be there.
Here's your code running, there's no space between the containers:
https://zapp.run/edit/flutter-z8206198306?entry=lib/main.dart&file=lib/main.dart
I think the problem could be related to the extension you are using for providing height, or to the Sizer widget.
If you want to handle responsiveness, I suggest to look at this package: https://pub.dev/packages/layout
Use Flexible
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Flexible(
child: Container(
color: Colors.red,
),
),
Flexible(
flex: 4,
child: Container(
color: Colors.green,
),
),
],
),
);}
I wanted to show text from a string variable before the Wrap widget. But when I wanted to add something like Text before Wrap widget it is giving me error. How can show some text before the Wrap widget.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Second Route"),
),
body: Center(
child:
Wrap(
children: _buildButtonsWithNames(),
),
)
);
}
You can give column as a child to the center widget like this:
body: Center(
child: Column(
children: [
Text("Your Text"),
Wrap(
children: _buildButtonsWithNames(),
),
],
),
),
Hope it answers the question.
If you want the text to be on top of the Wrap, add your Wrap to a Column and before of it add your Text widget.
If you want the text to be just before the Wrap, add your Wrap to a Row widget and do the same as for Column.
Just found a way right now!!! from another answer.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Second Route"),
),
body: Column(
children: <Widget>[
Text("He"),
Expanded(
child: Center(
child: Wrap(
children: _buildButtonsWithNames(),
),
),
)
],
),
);
}
}
Just use the column widget and pass the text and wrap widgets as children of the column
Totally I need a scrollable DataTable with refresh possibility on pull down between header and footer fixed width widgets.
I have a widget, using on every page in my app. THis widget return a Scaffold with appbar and body like column (). This widget used like CommonPage(title, widgetsArrayForBodyColumn) from other widgets.
For now I need to use a follow widgets in that body:
Lookup (for filtering or for example, any fixed height widget)
DataTable (for show data)
Card (to show another data)
DataTable should be scrollable and refreshable on pull down.
I tried many different ways, but still has no success. My last solution is using stack, but list hidden beside the card.
I can't understand how to achieve my goal: have refreshing datatable between non scrollable widgets in a column.
class CommonPage extends StatefulWidget {
final String title;
final List<Widget> children;
const CommonPage({
Key? key,
required this.title,
required this.children,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
...
body: Column(children: [
FixedHeightWidget(),
PageScreen(),
]);
}
}
class PageScreen {
#override
Widget build(BuildContext context) {
return CommonPage(
title: Title,
children: [
FixedHeightWidget(),
PageList(),
],
);
}
}
class PageList {
Widget build(BuildContext context) {
//TODO Return fixedWidthWidget at top, expandedRefreshableScrollableDataTable, fixedWidthWidget at bottom
}
}
My current solution: (almost achieves my goal, but as mentioned card hides part of list and no ways to scroll and check bottom of the list):
return Expanded(
child: Stack(
children: [
RefreshIndicator(
onRefresh: onRefresh,
child: ListView(
children: [
listItems.isNotEmpty
? DataTable(...)
: Container(),
],
),
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
alignment: Alignment.bottomCenter,
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Card(...),
),
),
),
],
),
],
),
);
I found the solution:
return Expanded(
child: Column(
children: [
Expanded(
child: RefreshIndicator(
onRefresh: onRefresh,
child: ListView(
children: [listItems.isNotEmpty
? DataTable(...)
: Container(),
],
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Card(...),
),
],
),
);
I'm new to Flutter/Dart, so maybe the problem I'have is just lack of knowledge. My goal is to build a card with an horizontal header on top of the card and then the card should display a list of item/value pairs vertically, wrapping them to a new column if the device is large enough. I've added a Column, for two children (the header and the Wrap), but if it's embedded in a column there's no wrapping at all.
I tried a lot of combinations but I didn't find a solution. If I remove the column, the Wrap widget works perfectly.
class TestApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return
MaterialApp(
title: 'Wrap Test',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: TestScreen(),
);
}
}
class TestScreen extends StatelessWidget {
/*
Builds a single item/value pair
*/
Widget _text(int i) {
var container = Container(
height: 50,
child: Row(
children: <Widget>[
Container(
width: 200,
child: Text(
'item $i',
),
),
Text(
'value $i',
),
],
),
);
return container;
}
/*
Builds a list of item/value pairs
*/
List<Widget> _items(int n) {
List<Widget> widgetList = [];
for (int i = 1; i <= n; i++) {
widgetList.add(_text(i));
}
return widgetList;
}
/*
This way Wrap widget isn't working as I thought...the reason is that it seems bounded by
the column and the column does not expands itself due to wrapping
*/
Widget buildWrapNotWorking(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wrap Test"),
),
body: Card(
color: Colors.yellow,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Header",
),
Wrap(
direction: Axis.vertical,
runSpacing: 50,
crossAxisAlignment: WrapCrossAlignment.start,
spacing: 20,
children: _items(20),
),
],
),
),
);
}
/*
This way Wrap widget is working, because I removed the column. But I need to have a card header
on top of the card.
*/
Widget buildWrapWorkingButNoHeader(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wrap Test"),
),
body: Card(
color: Colors.yellow,
child: Wrap(
direction: Axis.vertical,
runSpacing: 100,
crossAxisAlignment: WrapCrossAlignment.start,
spacing: 20,
children: _items(20),
),
),
);
}
#override
Widget build(BuildContext context) {
return buildWrapNotWorking(context);
// return buildWrapWorkingButNoHeader(context);
}
}
I'm expecting that calling buildWrapNotWorking(context) will work as desired.
The problem is similar to that one:
How to wrap row items in a card with flutter
Simply wrap you Wrap widget with - Expanded - this was it will get enough space in column.
code:
Widget buildWrapNotWorking(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wrap Test"),
),
body: Card(
color: Colors.yellow,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Header",
),
Expanded(
child: Wrap(
direction: Axis.vertical,
runSpacing: 50,
crossAxisAlignment: WrapCrossAlignment.start,
spacing: 20,
children: _items(20),
),
),
],
),
),
);
}