Related
Hello guys i have two stateful widget InactiveCustomersListView and MessageCustomerHeader
InactiveCustomersListView has a List of tiles, and these tiles have checkboxes
class InactiveCustomersListView extends StatefulWidget {
final bool checkAll;
const InactiveCustomersListView({
Key key,
this.checkAll,
}) : super(key: key);
#override
State<InactiveCustomersListView> createState() =>
_InactiveCustomersListViewState();
}
class _InactiveCustomersListViewState extends State<InactiveCustomersListView> {
bool checkAll;
List<CheckBoxModel> listOfCustomers = [];
#override
void initState() {
listOfCustomers.addAll({
CheckBoxModel(selected: false),
});
super.initState();
}
#override
Widget build(BuildContext context) {
final controller = Get.put(CustomersController());
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: listOfCustomers.length,
itemBuilder: (context, index) {
return Obx(() {
return Container(
color: Color(0xffFFFFFF),
child: ListTile(
contentPadding: controller.isCheboxVisible.isTrue
? EdgeInsets.only(left: 0, right: 22, top: 10, bottom: 10)
: EdgeInsets.only(left: 22, right: 22, top: 10, bottom: 10),
horizontalTitleGap: 5,
leading: controller.isCheboxVisible.isTrue
? Visibility(
visible: controller.isCheboxVisible.value,
child: Transform.scale(
scale: 1.3,
child: Checkbox(
side: MaterialStateBorderSide.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return const BorderSide(
width: 2, color: Color(0xff34495E));
}
return const BorderSide(
width: 1, color: Color(0xffB0BEC1));
},
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
activeColor: Color(0xff34495E),
//materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
//visualDensity: VisualDensity(horizontal: -4, vertical: -4),
value: listOfCustomers[index].selected,
onChanged: (value) {
setState(() {
listOfCustomers[index].selected = value;
final check = listOfCustomers
.every((element) => element.selected);
checkAll = check;
});
},
),
),
)
: null,
title: Row(
children: [
SizedBox(
width: 60,
height: 60,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(80)),
child: CachedNetworkImage(
height: 100,
width: double.infinity,
fit: BoxFit.cover,
imageUrl:
Get.find<AuthService>().user.value.avatar.thumb,
placeholder: (context, url) => Image.asset(
'assets/img/loading.gif',
fit: BoxFit.cover,
width: double.infinity,
height: 80,
),
errorWidget: (context, url, error) =>
Icon(Icons.error_outline),
),
),
),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'John Cletus',
style: GoogleFonts.poppins(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xff151515)),
),
Container(
decoration: BoxDecoration(
color: Color(0xffECF0F1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.only(
left: 10.0,
right: 10.0,
top: 5.0,
bottom: 5.0),
child: Text(
'Inactive',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff7F8D90)),
),
),
),
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
'2',
style: GoogleFonts.poppins(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xff151515)),
),
SizedBox(
width: 5,
),
Text(
'jobs',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff151515)),
),
],
),
Text(
'Last job 5 days ago',
style: GoogleFonts.poppins(
fontSize: 9,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w400,
color: Color(0xff151515)),
),
],
),
],
),
),
],
),
),
);
});
});
}
}
class CheckBoxModel {
bool selected;
CheckBoxModel({this.selected});
}
MessageCustomerHeader widget class has a checkbox that controls the Check boxes in the InactiveCustomersListView widget class:
class MessageCustomerHeader extends StatefulWidget {
final List<CheckBoxModel> listOfCustomers;
const MessageCustomerHeader({
Key key,
this.listOfCustomers,
}) : super(key: key);
#override
State<MessageCustomerHeader> createState() => _MessageCustomerHeaderState();
}
class _MessageCustomerHeaderState extends State<MessageCustomerHeader> {
bool checkAll = false;
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Select customers you woult like to message',
style: GoogleFonts.poppins(
color: Color(0xff596780).withOpacity(0.8),
fontSize: 14,
fontWeight: FontWeight.w500),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Transform.scale(
scale: 1.3,
child: Checkbox(
side: MaterialStateBorderSide.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return const BorderSide(
width: 2, color: Color(0xff34495E));
}
return const BorderSide(
width: 1, color: Color(0xffB0BEC1));
},
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
activeColor: Color(0xff34495E),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
visualDensity: VisualDensity(horizontal: -4, vertical: -4),
value: checkAll,
onChanged: (value) {
setState(() {
checkAll = value;
widget.listOfCustomers.forEach((element) {
element.selected = value;
});
});
},
),
),
SizedBox(
width: 10,
),
Text(
'Select all',
style: GoogleFonts.poppins(
color: Colors.black87,
fontSize: 12,
fontWeight: FontWeight.w400),
),
],
),
],
),
),
);
}
}
I tried using constructor to pass "listOfCustomers" from InactiveCustomersListView widget to MessageCustomerHeader widget
And also passing "checkAll" from MessageCustomerHeader to InactiveCustomersListView widget by also using constructors.
The problem is having is that when i click on the checkbox in MessageCustomerHeader widget to check all the check boxes in InactiveCustomersListView widget, the state don't seem to change and it doesn't even after setting all the logic. What am i doing wrong guys and how do i resolve this issue :(
This is the error i get when i tap the checkbox on the MessageCustomerHeader checkbox.
"The method 'forEach' was called on null.
Receiver: null
Tried calling: forEach(Closure: (CheckBoxModel) => Null)"
Thank you.
If you have the proper lints enabled you would have seen this warning: DON'T put any logic in createState().
From the associated description:
Implementations of createState() should return a new instance of a State object and do nothing more. Since state access is preferred via the widget field, passing data to State objects using custom constructor parameters should also be avoided and so further, the State constructor is required to be passed no arguments.
(emphasis added)
You are passing arguments to your State constructors. Instead, use widget.checkAll and widget.listOfCustomers to access widget properties from the state objects.
Also:
It would be better to specify a type for checkAll. In your code you just have final checkAll;.
It is difficult to read the screen shot of the error message. It would be better to include the error message as text in the question, along with an indication in your code of the line to which the error message is referring.
So, I used the IntroSlider package and I have successfully executed it. However, I don't want to use just a simple background color. I wanted to create a background with components on it that I have already created in a separate dart file. How will I e able to combine them? The following are the codes that I have created:
intro_slider.dart
import 'package:ehatid_driver_app/Screens/Welcome/components/background.dart';
import 'package:flutter/material.dart';
import 'package:intro_slider/dot_animation_enum.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';
import 'signup.dart';
class IntroSliderPage extends StatefulWidget {
#override
_IntroSliderPageState createState() => _IntroSliderPageState();
}
class _IntroSliderPageState extends State<IntroSliderPage> {
List<Slide> slides = [];
#override
void initState() {
// TODO: implement initState
super.initState();
slides.add(
new Slide(
title: "More Passengers",
description:
"No need to worry about getting passengers, \n as they will be able to connect directly to you",
pathImage: "assets/images/illus8.png",
),
);
slides.add(
new Slide(
title: "Convenient",
description: "Efficient way of acquiring new \n passengers for all stray tricycle drivers",
pathImage: "assets/images/illus2.png",
),
);
slides.add(
new Slide(
title: "Earn More",
description: "Higher revenue pay for maximizing \n every trip journey",
pathImage: "assets/images/illus11.png",
),
);
slides.add(
new Slide(
title: "Accept a Job",
description: "Register in TODA G5 Terminal and \n experience your first trip.",
pathImage: "assets/images/ehatid logo.png",
),
);
}
List<Widget> renderListCustomTabs() {
List<Widget> tabs = [];
for (int i = 0; i < slides.length; i++) {
Slide currentSlide = slides[i];
tabs.add(
Container(
width: double.infinity,
height: double.infinity,
child: Container(
margin: EdgeInsets.only(bottom: 10, top: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Image.asset(
currentSlide.pathImage.toString(),
matchTextDirection: true,
height: 250,
),
),
Container(
margin: EdgeInsets.only(top: 5),
child: Text(
currentSlide.title.toString(),
style: TextStyle(fontFamily: 'Montserrat', fontSize: 32, letterSpacing: -2, fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 3,
),
child: Text(
currentSlide.description.toString(),
style: TextStyle(
fontFamily: 'Montserrat', fontSize: 15, color: Color(0xff646262), letterSpacing: -0.5, fontWeight: FontWeight.w500
),
maxLines: 3,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
),
margin: EdgeInsets.only(
top: 15,
left: 20,
right: 20,
),
),
],
),
),
),
);
}
return tabs;
}
#override
Widget build(BuildContext context) {
return IntroSlider(
backgroundColorAllSlides: Colors.yellow,
renderSkipBtn: Text(
"Skip",
style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Color(0xff8C8C8C)),
),
renderNextBtn: Text(
"Next",
style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Colors.white),
),
renderDoneBtn: Text(
"Done",
style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Colors.white),
),
colorDot: Colors.white,
sizeDot: 10.0,
typeDotAnimation: dotSliderAnimation.SIZE_TRANSITION,
listCustomTabs: this.renderListCustomTabs(),
scrollPhysics: BouncingScrollPhysics(),
onDonePress: () => Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => HomePage(),
),
),
);
}
}
background.dart
import 'package:flutter/material.dart';
class Background extends StatelessWidget {
final Widget child;
const Background({
Key? key,
required this.child,
}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
height: size.height,
width: double.infinity,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
top: 0,
child: Image.asset("assets/images/Vector 1.png",
width: size.width,
),
),
child,
],
),
);
}
}
This is the UI im achieving for: The background is in background.dart, while all elements such as text, buttons and textfields are in intro_slider.dart.
UI:
Vector Image
Vector Image for BG
Try to remove IntroSlider's backgroundColorAllSlides, and set it in background.dart like this:
Container(
height: size.height,
width: double.infinity,
color: Colors.yellow,// <--- add here
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
top: 0,
child: Image.asset(
"assets/images/JTrrN.png",
width: size.width,
),
),
child,
],
),
)
And then use it like this:
Background(
child: IntroSlider(
renderSkipBtn: Text(
"Skip",
style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Color(0xff8C8C8C)),
),
renderNextBtn: Text(
"Next",
style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Colors.white),
),
renderDoneBtn: Text(
"Done",
style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Colors.white),
),
colorDot: Colors.white,
sizeDot: 10.0,
typeDotAnimation: dotSliderAnimation.SIZE_TRANSITION,
listCustomTabs: this.renderListCustomTabs(),
scrollPhysics: BouncingScrollPhysics(),
onDonePress: () => Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => HomePage(),
),
),
),
)
Hi I have a problem when using pull_to_refresh package, initial loaded content is behind two top fixed containers and I dont understand behaviour of this. When I used normal RefreshIndicator, everything goes as expected. I tried to set fixed height of containers, put both containers in Column, setting Shrinkwrap false on ListView but none of those help
Code below
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 50,
child: Column(children: [
Container(
child: Container(
margin: const EdgeInsets.only(top: 10.0),
child: Text(
AppLocalizations.of(context).translate(recordType + 'Records'),
textAlign: TextAlign.center,
style: TextStyle(
fontStyle: FontStyle.normal,
color: Colors.white,
fontSize: 30.0,
shadows: [
Shadow(
blurRadius: 10.0,
color: Colors.black,
offset: Offset(3.0, 3.0),
),
],
),
),
),
),
Container(
child: Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(
args['horseName'],
textAlign: TextAlign.center,
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.white,
fontSize: 28.0,
shadows: [
Shadow(
blurRadius: 10.0,
color: Colors.black,
offset: Offset(3.0, 3.0),
),
],
),
),
),
),
]),
),
Expanded(
child: SmartRefresher(
enablePullDown: true,
enablePullUp: true,
header: WaterDropHeader(
complete: Text(AppLocalizations.of(context).translate('refreshDone'),
style: TextStyle(color: Colors.white))),
footer: CustomFooter(
builder: (BuildContext context, LoadStatus mode) {
Widget body;
if (noMoreData) {
mode = LoadStatus.noMore;
}
if (mode == LoadStatus.idle) {
body = Text(AppLocalizations.of(context).translate('pullToLoadMore'),
style: TextStyle(color: Colors.white));
} else if (mode == LoadStatus.loading) {
body = RefreshProgressIndicator();
} else if (mode == LoadStatus.failed) {
body = Text(AppLocalizations.of(context).translate('loadFailedTryAgain'),
style: TextStyle(color: Colors.white));
} else {
body = Text(AppLocalizations.of(context).translate('noMoreData'),
style: TextStyle(color: Colors.white));
}
return Container(
height: 55.0,
child: Center(child: body),
);
},
),
controller: _refreshController,
onRefresh: refreshRecords,
onLoading: fetchRecordByDateDesc,
child: ListView.builder(
return Column(children: <Widget>[
Card(
child: ListTile(
Solved with this property:
ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
primary: false,
itemCount: allRecordsChronologically?.length ?? 0,
Explanation, why primary: false ? - its a ListView.Builder within column, column is
a primary scroll, Listview is within column but must be detached from column (cannot start where the actual column starts, because it has two containers above), and because containers are fixed on top it must be scrollable from the parent widget - which is Expanded
I am new to Flutter here i'm trying to select all the square boxes, given below is the code for single selection of ListTile when one tile is selected it changes it's background color to redAccent, but i need code for multiple selection where i can select all three ListTile or either two ListTile and not only one
class MultiSelect extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: GradientAppBar(
title: Text('MultiSelect'),
),
body: MultipleSelectItems(),
);
}
}
class MultipleSelectItems extends StatefulWidget {
#override
_MultipleSelectItemsState createState() => _MultipleSelectItemsState();
}
class _MultipleSelectItemsState extends State<MultipleSelectItems> {
String selected = "First";
#override
Widget build(BuildContext context) {
return Container(
child: GestureDetector(
child: Column(
children: <Widget>[
SizedBox(
height: 40,
),
GestureDetector(
onTap: () {
setState(() {
selected = "First";
});
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15),
height:100,
width: double.maxFinite,
decoration: BoxDecoration(
color: selected == 'First' ? Colors.redAccent : Colors.lightBlueAccent,
),
child: ListTile(
title: Text(
'First',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontFamily: 'WorksSansSemiBold',
fontWeight: FontWeight.bold,
),
),
),
),
),
Padding(padding: EdgeInsets.only(top: 20)),
GestureDetector(
onTap: () {
setState(() {
selected = "Second";
});
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15),
height:100,
width: double.maxFinite,
decoration: BoxDecoration(
color: selected == 'Second' ? Colors.redAccent : Colors.lightBlueAccent,
),
child: ListTile(
title: Text(
'Second',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontFamily: 'WorksSansSemiBold',
fontWeight: FontWeight.bold,
),
),
),
),
),
Padding(padding: EdgeInsets.only(top: 20)),
GestureDetector(
onTap: () {
setState(() {
selected = "Third";
});
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15),
height:100,
width: double.maxFinite,
decoration: BoxDecoration(
color: selected == 'Third' ? Colors.redAccent : Colors.lightBlueAccent,
),
child: ListTile(
title: Text(
'Third',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontFamily: 'WorksSansSemiBold',
fontWeight: FontWeight.bold,
),
),
),
),
),
SizedBox(
height: 40,
),
MaterialButton(
child: Text("Submit"),
color: Colors.blueGrey,
textColor: Colors.white,
onPressed: () {},
),
],
),
),
);
}
}
I am taking the requirement as you don't want to toggle, but to select multiple items. This is the solution.
In Flutter, creating a different StatefulWidget for the buttons, will be unique for every button, and when you select the buttons. And hitting each button will have unique informations only. I know it is little confusing but follow this, and you will understand.
class MultipleSelectItems extends StatefulWidget {
#override
_MultipleSelectItemsState createState() => _MultipleSelectItemsState();
}
class _MultipleSelectItemsState extends State<MultipleSelectItems> {
// This is responsible to crate your buttons
// Every button is created will be having it's unique instance only
// Means, if you hit one button, it won't effect another, and you can select
// multiple
// And you don't have to declare your buttons multiple times in the code
// Which is indeed bad way of coding :)
List<Widget> get listTileWidgets{
List<Widget> _widget = [SizedBox(height: 40.0)];
List<String> _buttonName = ['First', 'Second', 'Third', 'Fourth'];
// ListTileWidget is defined below in another StatefulWidget
_buttonName.forEach((name){
_widget.add(ListTileWidget(name: name));
_widget.add(SizedBox(height: 20.0));
});
return _widget;
}
#override
Widget build(BuildContext context) {
return Material(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: this.listTileWidgets
)
)
);
}
}
// This will accept name of the button which will be used to be given
// plus maintaining the uniqueness
class ListTileWidget extends StatefulWidget{
final String name;
ListTileWidget({Key key, this.name}):super(key:key);
#override
ListTileWidgetState createState() => ListTileWidgetState();
}
class ListTileWidgetState extends State<ListTileWidget>{
bool isTapped = false;
#override
Widget build(BuildContext context){
return GestureDetector(
onTap: () {
setState(() => isTapped = true);
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15),
height:100,
color: isTapped ? Colors.redAccent : Colors.lightBlueAccent,
width: double.maxFinite,
child: ListTile(
title: Text(
widget.name,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontFamily: 'WorksSansSemiBold',
fontWeight: FontWeight.bold,
)
)
)
)
);
}
}
Result you will get is below:
I am sorry that, I have not added your "Submit" button. So in order to make that thing visible in your code, simply add this in your Column only, and you will be good to go:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
this.listTileWidgets,
SizedBox(height: 40),
MaterialButton(
child: Text("Submit"),
color: Colors.blueGrey,
textColor: Colors.white,
onPressed: () {},
)
]
)
That's pretty much it now.
I've got your answer. Changing the string variable to be an array can complete what you are looking to do. Then by checking if "First" or "Second" or "Third" is in the array we can determine what color the ListTile should be. Also when the ListTile is tapped we need to check if the array contains that string to determine if we are going to remove the string from the array (aka turning the color to blue) or if we need to add the string to the array (aka turning the color to red). Below I have included all of those changes to your class. Hope this answer helps! Comment if you have any questions
class MultipleSelectItems extends StatefulWidget {
#override
_MultipleSelectItemsState createState() => _MultipleSelectItemsState();
}
class _MultipleSelectItemsState extends State<MultipleSelectItems> {
var theSelected = ["First"];
#override
Widget build(BuildContext context) {
return Material(
child: Container(
child: GestureDetector(
child: Column(
children: <Widget>[
SizedBox(
height: 40,
),
GestureDetector(
onTap: () {
setState(() {
if(theSelected.contains("First")) {
theSelected.remove("First");
}
else {
theSelected.add("First");
}
});
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15),
height: 100,
width: double.maxFinite,
decoration: BoxDecoration(
color: theSelected.contains('First') ? Colors.redAccent : Colors.lightBlueAccent,
),
child: ListTile(
title: Text(
'First',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontFamily: 'WorksSansSemiBold',
fontWeight: FontWeight.bold,
),
),
),
),
),
Padding(padding: EdgeInsets.only(top: 20)),
GestureDetector(
onTap: () {
setState(() {
if(theSelected.contains("Second")) {
theSelected.remove("Second");
}
else {
theSelected.add("Second");
}
});
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15),
height:100,
width: double.maxFinite,
decoration: BoxDecoration(
color: theSelected.contains('Second') ? Colors.redAccent : Colors.lightBlueAccent,
),
child: ListTile(
title: Text(
'Second',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontFamily: 'WorksSansSemiBold',
fontWeight: FontWeight.bold,
),
),
),
),
),
Padding(padding: EdgeInsets.only(top: 20)),
GestureDetector(
onTap: () {
setState(() {
if(theSelected.contains("Third")) {
theSelected.remove("Third");
}
else {
theSelected.add("Third");
}
});
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15),
height:100,
width: double.maxFinite,
decoration: BoxDecoration(
color: theSelected.contains("Third") ? Colors.redAccent : Colors.lightBlueAccent,
),
child: ListTile(
title: Text(
'Third',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontFamily: 'WorksSansSemiBold',
fontWeight: FontWeight.bold,
),
),
),
),
),
SizedBox(
height: 40,
),
MaterialButton(
child: Text("Submit"),
color: Colors.blueGrey,
textColor: Colors.white,
onPressed: () {},
),
],
),
),
),
);
}
}
I want to create below UI
How to draw a line between widget, If try to expand the column line inside the row it gives error of infinity height
//Below some code not able to post all the code.
ListView(
shrinkWrap: true,
children: <Widget>[
new _Row(
label: "1",
body:
"Screening: We will screen your current portfolio to check your Portfolio's health.",
),
SizedBox(
height: 16,
),
],
),
class _Row extends StatelessWidget {
final String label;
final String body;
const _Row({Key key, this.label, this.body});
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Color(0xff76587b).withOpacity(0.5),
shape: BoxShape.circle,
),
child: Center(
child: Text(
label,
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w500),
),
),
),
SizedBox(
width: 16,
),
Flexible(
child: Text(
body,
style: kModelTargetCARGTInactiveTextLabel.copyWith(
color: Colors.black, height: 1.4),
),
),
],
);
}
}
In this code line between bullet points not visible. I tried may option but it not working.