I want to showing list of items with ListView.builder, which wrap with BlocBuilder. My code is success connect to API, but the problem is I do not know how to display the items, instead the length of the items like picture below.
Here I attach the code:
SizedBox(
height: 350,
width: 290,
child: Padding(
padding: const EdgeInsets.only(left: 30, top: 20),
child: BlocBuilder<ExcavatorBloc, ExcavatorState>(
builder: (context, state) {
return ListView.builder(
itemCount: state.excavator.length,
itemBuilder: (context, index) {
return Row(
children: [
const SizedBox(
height: 10,
width: 10,
child: CircleAvatar(
foregroundColor:
ColorName.brandSecondaryGreen,
backgroundColor:
ColorName.brandSecondaryGreen,
),
),
const SizedBox(
width: 5,
),
Text(
state.excavator.length.toString(), //The problem is here----------
style: subtitle1(),
),
],
);
},
);
},
),
),
),
Instead of this
Text(
state.excavator.length.toString(),
style: subtitle1(),
),
use the index of the list builder
Text(
state.excavator?[index].attributeName ?? 'No value',
style: subtitle1(),
),
I want to make this image/Text resizeable when run on a smaller or bigger phone rights now it’s just look like not fitted to the screen. What widgets should I wrap it with?
This is my IphoneS:
And this is my current simulator (Iphone13):
And some of the Code for the CarouselSlider images:
List image1 = [
'assets/images/f1.png',
'assets/images/f2.png',
'assets/images/f3.png',
'assets/images/f4.png',
];
CarouselSlider(
options: CarouselOptions(
height: 200.0,
autoPlay: true,
reverse: false,
enlargeCenterPage: false,
enableInfiniteScroll: false,
scrollDirection: Axis.horizontal,
autoPlayInterval: const Duration(seconds: 6),
autoPlayAnimationDuration:
const Duration(seconds: 3),
),
items: image1
.map(
(item) => Padding(
padding: const EdgeInsets.only(top: 9.0),
child: Card(
margin: const EdgeInsets.only(
top: 10.0,
bottom: 20.0,
),
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10.0),
),
child: GestureDetector(
child: ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(10.0),
),
child: Image.asset(
item,
fit: BoxFit.fill,
),
),
onTap: () {
image1.indexOf(item);
indexMethod(
image1.indexOf(item).toString());
},
),
),
),
)
.toList(),
),
And some of the Code for the Text:
//profile button only
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: CircleAvatar(
radius: 28,
backgroundColor:
const Color(0xff5CE1E6),
child: IconButton(
icon: const Icon(
Icons.person,
size: 35,
color: Colors.black,
),
onPressed: () => Navigator.push(
context,
PageTransition(
type: PageTransitionType
.rightToLeft,
child:
const ProfileScreen())),
),
),
),
const Padding(
padding: EdgeInsets.only(top: 10.0),
child: Text('Profile'),
),
],
),
try this https://pub.dev/packages/flutter_screenutil
A flutter plugin for adapting screen and font size. Let your UI display a reasonable layout on different screen sizes!
tutorial: https://youtu.be/LWteDQes4Kk
An easy and dependency-free way is to use MediaQuery.of(context).size
Examples:
Use MediaQuery.of(context).size.width to get a full width of the device.
Use MediaQuery.of(context).size.height to get the total height of the device.
Use MediaQuery.of(context).size.height * 0.3 to get 30% of the device height.
I'm trying to create a comment tree but I don't have any idea how to do that. The package I found on pub.dev is not like what I want. I mesh with codes. No tutorial found related to me.
This is what I want :
I want a tutorial or idea to create design like showing in the image.
You can draw line like this
SizeBox(
height : 2,
width : MediaQuery.of(context).size.width,
child : Container(color:Colors.black)
),
try this
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(width: 2.0, color:Colors.black),//(or use VerticalDivider())
SizedBox(width: 4.0),
YourCommentWidget(),
],
))
In your tree, you can use divider() for clear line, also you can use sizedbox.
firstwidget (
child : secondwidget (child : ..............)
)
simply you can wrap second widget with a padding.
Check this package. https://pub.dev/packages/flutter_fancy_tree_view
#Pradip said in comments.
If that you want, just add in pubspec.yaml file or you want to customize like in image just Copy the code from git repository and paste in your project as separate directory.
Edit as you want.
Finally, I achieve what I want. I think is not an Optimize way. I really like to know your comment on my code. It's litter meshy but the output looks nice.
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class TestTree extends StatelessWidget {
const TestTree({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: ListView(
children: [
commentTreeRoot(
context: context,
image:
'https://www.whatsappprofiledpimages.com/wp-content/uploads/2018/07/beaJKHutiful-girl-profile-p-199x300.jpg',
name: 'User Name',
subtitle: '11111 Comment Text User name Comment Text User name ',
posteDate: Text('20:18'),
content:
Text("""The :expressions will be suitable for girls, guys,\n
married people too. Because in life complications start and\n
ends with girls at the same time happiness comes to girls and only girls. Thus, even a silly waste paper will look bright when it is in the hands of beautiful girls.
The pixels are picture perfect in our website."""),
comments: [
commentTreeChild(
context,
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT16eO5W8VPjVFrkvG8n_2FQKjByMcbLtBF4A&usqp=CAU,',
[
commentTreeChild(
context,
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT16eO5W8VPjVFrkvG8n_2FQKjByMcbLtBF4A&usqp=CAU',
[],
margin: 40,
last: true)
]),
commentTreeChild(
context,
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT16eO5W8VPjVFrkvG8n_2FQKjByMcbLtBF4A&usqp=CAU',
last: true,
[]),
],
)
],
));
}
Widget commentTreeRoot({
required BuildContext context,
required String image,
required String name,
required String subtitle,
required Widget posteDate,
required Widget content,
required List<Widget> comments,
}) {
return Column(
children: [
CustomPaint(
painter: CreateLine(root: true),
child: Column(
// root
children: [
ListTile(
horizontalTitleGap: 0,
leading: CircleAvatar(
backgroundImage: NetworkImage(image),
),
title: Padding(
padding: const EdgeInsets.only(top: 15, left: 8),
child: Text(name),
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 0, left: 8),
child: Text(
subtitle,
overflow: TextOverflow.clip,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
trailing: posteDate,
),
Container(
// Content
margin: EdgeInsets.only(left: 60),
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color.fromARGB(255, 240, 240, 240),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: content,
),
Column(
children: comments,
),
SizedBox(
height: 10,
),
commentRootTextfield(context),
],
),
)
],
);
}
Widget commentTreeChild(
BuildContext context, String image, List<Widget> commentReply,
{bool last = false, double margin = 60}) {
return Container(
margin: EdgeInsets.only(left: margin, top: 15),
child: CustomPaint(
painter: CreateLine(root: false, last: last),
child: Column(
// child 1
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 15,
backgroundImage: NetworkImage(image),
),
Expanded(
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color.fromARGB(255, 240, 240, 240),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Column(
children: [
Row(
children: [
Expanded(
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 8),
child: Text(
'User Name',
overflow: TextOverflow.ellipsis,
),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8),
child: Text('20:18'),
)
],
),
Text(
"""The expressions will be suitable for girls, guys,
"""),
],
),
),
),
],
),
),
last ? commnetChildTextField(context) : commnetChildReplyButton(),
Column(
children: commentReply,
)
],
), // child root
),
);
}
Widget commnetChildReplyButton() {
return Container(
margin: const EdgeInsets.only(
left: 30,
),
alignment: Alignment.centerLeft,
child: SizedBox(
height: 20,
child: TextButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(EdgeInsets.zero),
),
onPressed: () {},
child: Text('Replay')),
));
}
Widget commnetChildTextField(BuildContext context) {
return FittedBox(
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 8, top: 16),
child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
'https://img.etimg.com/thumb/msid-69381991,width-650,imgsize-594328,,resizemode-4,quality-100/hacker-1.jpg'),
radius: 15,
),
SizedBox(
width: 10,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Color.fromARGB(255, 231, 231, 231),
border: Border.all(width: 0.5),
borderRadius: BorderRadius.all(Radius.circular(30))),
child: TextField(
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
hintText: 'Type your message...',
contentPadding:
EdgeInsets.symmetric(horizontal: 16, vertical: 8),
isDense: true,
border: InputBorder.none,
),
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
],
),
),
);
}
Widget commentRootTextfield(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
border: Border(
top: BorderSide(width: 3, color: Color.fromARGB(255, 231, 231, 231)),
bottom:
BorderSide(width: 2, color: Color.fromARGB(255, 231, 231, 231)),
),
),
child: FittedBox(
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
IconButton(onPressed: () {}, icon: Icon(FontAwesomeIcons.smile)),
SizedBox(
width: MediaQuery.of(context).size.width,
child: Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 231, 231, 231),
borderRadius: BorderRadius.all(Radius.circular(30))),
child: TextField(
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
hintText: 'Type your message...',
contentPadding:
EdgeInsets.symmetric(horizontal: 16, vertical: 8),
isDense: true,
border: InputBorder.none,
),
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
SizedBox(
width: 30,
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.attach_file,
size: 25,
))),
SizedBox(
width: 40,
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.mic,
size: 30,
)),
),
],
),
),
);
}
}
class CreateLine extends CustomPainter {
CreateLine({required this.root, this.last = false});
final bool root;
final bool last;
#override
void paint(Canvas canvas, Size size) {
final p1 = size.topLeft(root ? Offset(35, 65) : Offset(15, 40));
final p2 = root
? Offset(35, size.height - 53)
: Offset(15, size.height - (last ? 40 : 0));
final paint = Paint()
..color = Colors.black
..strokeWidth = 1;
canvas.drawLine(p1, p2, paint);
// TODO: implement paint
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
Output look like this now
I want to build a custom dialog whose child is a widget displaying the HTML content. I'm struggling with making the dialog's height size to its child. Currently, I'm giving the container a fixed height as otherwise it would crash due to unbounded height for Column. The package i use to display HTML content: Easy Web View.
My code:
class CustomContentDialog extends StatelessWidget {
CustomContentDialog({required this.content});
final String content;
#override
Widget build(BuildContext context) {
return Center(
child: Material(
child: Container(
width: MediaQuery.of(context).size.width * 0.3,
height: MediaQuery.of(context).size.height * 0.8,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding:
const EdgeInsets.only(left: 24, bottom: 16, top: 16),
child: Text(
'Title',
),
),
IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: const Icon(
Icons.close,
color: Colors.grey,
size: 20,
),
)
],
),
const Divider(
indent: 10,
endIndent: 10,
color: Color(0xFFE9E9E9),
),
Flexible(
fit: FlexFit.loose,
child: Padding(
padding: const EdgeInsets.only(left: 24.0),
child: EasyWebView(
src: src,
onLoaded: () {},
isHtml: true,
isMarkdown: false,
convertToWidgets: false,
key: const Key('HTML'),
),
),
),
],
),
),
),
);
}
}
What I've achieved so far:
I'm trying to control the size of the FlatButton with an Icon in it. But it seems the Icon is breaking the button.
return Container(width: 180,height:30,
child: Row(
children: [
FlatButton(onPressed: () => _selectedDateDailyChart > 0 ? _adjustDate(-1) : null,
child: Container(
color:Colors.red,
width: 20,
child: Icon(Icons.arrow_back_ios),
),
padding: EdgeInsets.zero
),
Container(child: Text(currentDate, style: Theme.of(context).textTheme.headline3.apply(fontSizeDelta: -2)),),
FlatButton(onPressed: () => _selectedDateDailyChart > 0 ? _adjustDate(-1) : null,
child: Container(
width: 20,
child: Icon(Icons.arrow_forward_ios),
),
padding: EdgeInsets.zero
),
],),
Here is what it looks like:
You may want put an InkWell widget around you Icon insted, same result, 0 padding.
you just have to use Expanded Widget like this "to make a balance between the two button wrap the other Button with expanded too"
child: Container(
width: 180,
height: 30,
child: Row(
children: [
Expanded(
child: FlatButton(
onPressed: () => _selectedDateDailyChart > 0
? _adjustDate(-1)
: null,
child: Container(
color: Colors.red,
width: 20,
child: Icon(Icons.arrow_back_ios),
),
padding: EdgeInsets.zero),
),
Container(
child: Text(currentDate,
style: Theme.of(context)
.textTheme
.headline3
.apply(fontSizeDelta: -2)),
),
FlatButton(
onPressed: () =>
_selectedDateDailyChart > 0 ? _adjustDate(-1) : null,
child: Container(
width: 20,
child: Icon(Icons.arrow_forward_ios),
),
padding: EdgeInsets.zero),
],
),
),