I am writing a row of data with space between the item. However, the items on the right side are not aligned properly.
As you can see from image the right elements are aligned to the end
How do I fit it so the "*" are aligned
Here is my code
static pw.Row makeRow(String sk1, String sk2) {
return pw.Row(
mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: <pw.Widget>[
pw.Column(
children: <pw.Widget>[
pw.Row(
children: <pw.Widget>[
pw.Container(
width: 2.0,
height: 2.0,
decoration: pw.BoxDecoration(
shape: pw.BoxShape.circle,
color: PdfColor.fromInt(Colors.black.value),
),
),
pw.SizedBox(width: 5.0),
makeTextField(sk1, size: 11.0),
],
)
],
),
if (sk2 != null)
pw.Column(
children: <pw.Widget>[
pw.Row(
children: <pw.Widget>[
pw.Container(
width: 2.0,
height: 2.0,
decoration: pw.BoxDecoration(
shape: pw.BoxShape.circle,
color: PdfColor.fromInt(Colors.black.value),
),
),
pw.SizedBox(width: 4.0),
makeTextField(sk2, size: 11.0),
],
)
],
),
],
);
}
I am looping through a list and calling the method to create a row.
Thanks for your help
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children:[
Text('Skill 1'),
Text('Skill 2'),
]
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
// If you want to move it to the end just use CrossAxisAlignment.end
children:[
Text('Skill 1'),
Text('Skill 22222'),
]
),
]
)
)
);
}
}
This code will give you following output:
You can use the table widget instead of columns and rows
Look at
https://api.flutter.dev/flutter/widgets/Table-class.html
Try this:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Skill 12938'),
Text('Skill 2')
]
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Skill 3'),
Text('Skill 42938')
]
)
]
)
demo: https://dartpad.dev/b6409e10de32b280b8938aa75364fa7b
Related
I want to hold background image and swipe pageview screen.
However, it seems that I can't swipe if I put image file(I can do only when I delete background image) even though you can see the pageindicator.
](https://i.stack.imgur.com/oXYaL.jpg)
please let me know how to do it. Is there any way to solve it? I don't know what I missed here.
import 'package:eseowakorean/page/secondpage/add_image_profile1.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile2.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile3.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile4.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import '../../widgets/text_widgets.dart';
class AddInformationOnBoarding extends StatefulWidget {
const AddInformationOnBoarding({super.key});
#override
State<AddInformationOnBoarding> createState() =>
_AddInformationOnBoardingState();
}
class _AddInformationOnBoardingState extends State<AddInformationOnBoarding> {
PageController _controller = PageController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
PageView(
controller: _controller,
children: [
AddImageProfile1(),
AddImageProfile2(),
AddImageProfile3(),
AddImageProfile4(),
],
),
Container(
height: double.infinity,
width: double.infinity,
// alignment: Alignment.center,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/home.jpg',
),
fit: BoxFit.cover),
),
child: Column(
children: [
SizedBox(
height: 60,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SvgPicture.asset('assets/Skip.svg'),
// poppinsTextWidget('hi')
],
),
),
SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
poppinsTextWidget('Let' 's Talk About You!', fontSize: 20)
],
),
],
),
),
Container(
alignment: Alignment(0, 0.75),
child: Row(
children: [
SmoothPageIndicator(controller: _controller, count: 4),
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
],
),
);
}
}
You are containing everything within the same stack. Add the image itself in another Stack widget.
Try this example:
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
Image.asset(
"assets/home.jpg",
),
Stack(
children: [
PageView(
controller: _controller,
children: [
AddImageProfile1(),
AddImageProfile2(),
AddImageProfile3(),
AddImageProfile4(),
],
),
Column(
children: [
SizedBox(
height: 60,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SvgPicture.asset('assets/Skip.svg'),
// poppinsTextWidget('hi')
],
),
),
SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
poppinsTextWidget('Let' 's Talk About You!', fontSize: 20)
],
),
],
),
Container(
alignment: Alignment(0, 0.75),
child: Row(
children: [
SmoothPageIndicator(controller: _controller, count: 4),
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
],
),
],
),
);
I'm trying to put a TabBar in the middle of the screen to make a personal area view. Every time I run the code its jumps me up an exception.
The problem comes in the Tabbar the part above is just the name of the user and the Avatar but when I try to put the appbar it throws me this "throw constraintsError;"
Here is the source code which I use to make the view:
class PersonalArea extends StatelessWidget {
#override
Widget build(BuildContext context) {
String _viewSelector = "personalData";
late Color color = Colors.white;
return new Scaffold(
body: StoreConnector<AppState, PersonalAreaViewModel>(
onInit: (store) {
store.dispatch(new GetPersonalAreaAction());
},
converter: (store) => PersonalAreaViewModel.fromStore(store),
builder: (context, viewModel) => Column(children: [
Stack(children: [
Container(
width: double.infinity,
padding: EdgeInsets.only(left: 4, right: 4),
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height / 2,
child: Column(
mainAxisSize: MainAxisSize.min,children: [
Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
avatar(),
],
),
Align(
alignment: Alignment.topRight,
child: edit(),
)
],
),
//Avatar&Edit
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(top: 12),
child: generateStyleText(
"${FirebaseAuth.instance.currentUser?.displayName}",
color.primary75,
FontWeight.w700,
0,
16,
0),
)
],
),
//Name
]), //MainColumn
),
DefaultTabController(
length: 3,
child: Container(
child: Column(
children: [
TabBar(
tabs: [
Tab(
text: "Experiencia",
),
Tab(
text: "Area",
),
Tab(
text: "pedro",
),
],
indicatorSize: TabBarIndicatorSize.tab,
),
Expanded(
child: TabBarView(
children: [
Text('people'),
Text('Person'),
Text("data"),
],
),
)
],
),
))
],
),
)
])
])));
}
Wrap the DefaultTabController with Expanded
I'm writing a mobile app in Flutter+Dart, and am able to render a User's Account Info, but am stuck on how to loop through a list to populate and render a table with the objects in that list, right under the User Account Info.
Here's my 'Container', I wish to NOT use indexes like videos.removeAt(0) and somehow loop through all the videos to populate the table.
Widget build(BuildContext context) {
List<Video> videos = Video.getVideosFromJson(jsonDecode(json));
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Account Info for ' + customer.firstName + ' ' + customer.lastName),
Container(
child: Padding(
padding: const EdgeInsets.all(14.0),
//TODO: HERE IS THE TABLE, I WISH TO DUPLICATE THESE ROWS FOR EACH "VIDEO" IN "List<Video> videos"
child: Table(
border: TableBorder.all(width: 1.0, color: Colors.black),
children: [
TableRow(children: [
TableCell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Text('VideoId'),
new Text(videos.removeAt(0).id.toString()),
],
),
)
]),
TableRow(children: [
TableCell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Text('Video Price'),
new Text(videos.removeAt(0).total.toString()),
],
),
)
]),
]
)
)
)
]
)
);
What is the best way to go about solving this?
Here is what you can do.
Below dart 2.3 you can use map like:
Table(
border: TableBorder.all(width: 1.0, color: Colors.black),
children: videos.map((video){
return TableRow(children: [
TableCell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Text('VideoId'),
new Text(video.id.toString()),
],
),
)
]);
}).toList(),
);
While for dart 2.3 and above:
Table(
border: TableBorder.all(width: 1.0, color: Colors.black),
children: [
for (var video in videos) TableRow(children: [
TableCell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Text('VideoId'),
new Text(video.id.toString()),
],
),
)
])
]
);
I think you are looking for something like this:
List<TableRow> all = items.map<TableRow>((item) {
return getTableRow(item);
}).toList();
Table(children: all);
I want to do this :
But here is what I actually got :
Here is my code :
Row itemTransaction(BuildContext context, Transaction transaction) {
/// This is the function that will build each item of our transaction list.
return new Row(
children: <Widget>[
new Container(
width: MediaQuery.of(context).size.width / 6,
height: MediaQuery.of(context).size.width / 6,
child: new Image.asset(
(transaction.sent) ? "images/tx_output.png" : "images/tx_input.png",
),
),
new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
discoderyText("test"),
discoderyText("test 2"),
],
),
discoderyText("SOME HASH KEY"),
],
),
],
);
}
The discoderyText is basically a custom text (i.e. with colors).
As you can see, there is mainAxisAlignment: MainAxisAlignment.spaceBetween set for my Row, so test and test2 should be on opposite sides.
When I remove the image and I only returns a Row that contains two Text, and I set the mainAxisAlignment, it works. It seems like nested rows can NOT use this variable.
Here is basically the plan of my view :
Screenshot
Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 6,
height: MediaQuery.of(context).size.width / 6,
child: CircleAvatar(backgroundImage: AssetImage(chocolateImage),),
),
Expanded( // add this
child: Padding(
padding: const EdgeInsets.all(8.0), // give some padding
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min, // set it to min
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("test"),
Text("test 2"),
],
),
Text("SOME HASH KEY HERE"),
],
),
),
),
],
)
This is my code to build the item view container:
Widget buildItemView(InboxItem t) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => print("ontap")),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
icon ...
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
/// title
_buildTitle(t),
...
],
)
],
)),
Divider(height: 3.0)
],
),
);
}
and _buildTitle code, here is where the problem occurs:
Widget _buildTitle(InboxItem item) {
return Container(
padding: EdgeInsets.only(bottom: 2.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
/// sender
Text(item.sender == null ? "" : item.sender, style: ltBlackLargeText),
/// time
Text(item.receiveTime == null ? "" : item.receiveTime,
style: dkGreySmallText),
],
),
);
}
Run result, time is immediately after the username instead of the right.
This is part of the screenshot:
Where is the problem?
Because the superior does not fill the remaining space, change the item view code:
Widget buildItemView(InboxItem t) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => print("ontap")),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
icon ...
),
Expanded(
child:Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
/// title
_buildTitle(t),
...
],
) ,
)
],
)),
Divider(height: 3.0)
],
),
);
}
Wrap Column Widget with Expanded inside Row as below,
Row(
children: [
Image.asset("assets/..."),
Expanded(
child: Column(children: [
Row(
children: [
Text("admin"),
Text("2020-12-14"),
],
),
]),
),
],
)
See this image
Wrap your row in the SizedBox widget and set your desired width. Inside the column widget, the row is not getting enough width to apply mainAxisAlignment: MAinAxisAlignment.spaceBetween.
Row(
children: [
// avatar image
const CircleAvatar(
backgroundColor: Colors.yellow,
radius: 45,
),
const SizedBox(width: 10),
// for side details
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// for first row using spaceBetween
SizedBox(
width: MediaQuery.of(context).size.width * 0.6,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text('admin'),
Text('20-10-2020'),
],
),
),
// other details
const SizedBox(height: 10),
const Text('123'),
const SizedBox(height: 10),
const Text('12312'),
],
),
],
),
You don't need to these three lines;
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
Just use Spacer() to push the next item to the end of empty space. Here is your final code;
Widget _buildTitle(InboxItem item) {
return Container(
padding: EdgeInsets.only(bottom: 2.0),
child: Row(
children: <Widget>[
/// sender
Text(item.sender == null ? "" : item.sender, style: ltBlackLargeText),
Spacer(),
/// time
Text(item.receiveTime == null ? "" : item.receiveTime,
style: dkGreySmallText),
],
),
);
}