why I got Another exception was thrown: Incorrect use of ParentDataWidget.? - flutter

Hello I'm trying to create a widget of smoothPageIndicator for the introduction of my page. The screen contain picture, title and description. but an exception occured Another exception was thrown: Incorrect use of ParentDataWidget.
this is the code :
#override
Widget buildView() {
var size = MediaQuery.of(context).size;
var textTheme = Theme.of(context).textTheme;
return SafeArea(
child: Scaffold(
floatingActionButton: isSelected
? FloatingActionButton(
backgroundColor: Colors.deepPurple,
onPressed: () {},
child: const Icon(Icons.arrow_forward),
)
: null,
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
centerTitle: true,
elevation: 0),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(models[currentIndex].imgAssetAddress),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken),
),
),
child: ClipRRect(
child: Expanded(
flex: 1,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 500,
child: PageView.builder(
onPageChanged: (index) {
setState(() {
currentIndex = index;
});
},
controller: _controller,
itemCount: models.length,
itemBuilder: (BuildContext context, int index) {
currentIndex = index;
return GestureDetector(
onTap: () {
setState(() {
if (isSelected == false) {
isSelected = true;
} else {
isSelected = false;
}
});
},
child: Padding(
padding: const EdgeInsets.only(
top: 20, left: 30, right: 30, bottom: 15),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.white,
border: isSelected
? Border.all(
width: 4,
color: Colors.deepPurple)
: null),
child: Column(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(models[index]
.imgAssetAddress),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(15),
),
margin: const EdgeInsets.all(10),
height:
MediaQuery.of(context).size.height /
2.4,
),
Expanded(
child: Text(
models[index].city,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Expanded(
child: Text(
models[index].description,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
color: Colors.grey[600],
),
)),
),
],
),
),
),
);
}),
),
SmoothPageIndicator(
controller: _controller,
count: models.length,
),
currentIndex == 3
/// GET STARTED BTN
? TextButton(
onPressed: (() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BleScanWindow()),
);
}),
child: const Text("Get Started",
style: TextStyle(color: Colors.blue)),
)
/// SKIP BTN
: SkipBtn(
size: size,
textTheme: textTheme,
onTap: () {
setState(() {
_controller.animateToPage(3,
duration:
const Duration(milliseconds: 1000),
curve: Curves.fastOutSlowIn);
});
})
],
),
My question is how to edit this code to get a clean code and a performant response ?
Thanks in advance for your help

As mentioned, Expanded and Flexible widgets can only be used in Rows and Columns. I noticed that further down you are also using an Expanded inside a Padding widget:
Padding(
padding: const EdgeInsets.all(8.0),
child: Expanded( //// <--- problem
child: Text(
models[index].description,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
color: Colors.grey[600],
),
)),
),

In your source code:
child: ClipRRect(
child: Expanded( //// <--- problem
flex: 1,
child: BackdropFilter(
Here you are using an Expanded widget inside a ClipRRect, which is causing the issue you are seeing.
Expanded is a ParentDataWidget that only works inside a Flex (like Row or Column widget), it cannot be used as a child to a ClipRRect widget like you did.

Related

How I put Blur image in the scaffold background in flutter

I want to put the transparent image on the background with text on it. I tried with container in return but it's not working. Also I tried container in the body, but unfortunately that is also not working for me. It's a single screen app. Below is my code. Your answer will be very helpful for me.
Thanks in advance.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/tree.png",
),
),
centerTitle: true,
title: Text(
"Welcome To Plants",
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.w800,
),
)),
body: Column(
children: [
Flexible(
child: ListView.builder(
itemCount: _messages.length,
reverse: true,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0), child: _messages[index]),
),
),
const Divider(
color: Color.fromARGB(255, 51, 223, 56),
thickness: 1,
),
_istyping ? LinearProgressIndicator() : Container(),
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: _controller,
onSubmitted: (value) => _sendMessage(),
decoration: const InputDecoration.collapsed(
hintText: "Type Here",
hintStyle: TextStyle(fontSize: 20)),
),
)),
ButtonBar(children: [
IconButton(
onPressed: () {
_isImageSearch = false;
_sendMessage();
},
icon: Icon(
Icons.send,
color: Theme.of(context).primaryColor,
)),
TextButton(
onPressed: () {
_isImageSearch = true;
_sendMessage();
},
child: Text("Show Image"))
]),
],
),
)
],
)
Import the following module
import 'dart:ui';
make sure you included the asset in your yaml file
eg: used lib/utils/images/test.jpg
Example Scaffold
Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Image.asset('lib/utils/images/test.jpg', fit: BoxFit.fill),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
color: Colors.black.withOpacity(0.5),
),
),
// Add your UI component here
],
),
);
Example screenshot

How to set number of elements to show in a CarouselSlider per page, using carousel_slider in flutter

I'm creating a vertical carousel slider using carousel_slider but there's a huge empty space between elements and I can't display the previous element on the screen. What is the best way to remove the empty space and also show the previous element.
My screen is set as follows
Column(
children: [
Container(
margin: const EdgeInsets.fromLTRB(16, 16, 16, 16),
child: TextField(
controller: controller,
),
),
//Carousel built here
Expanded(
child: CarouselSlider.builder(
itemCount: cars.length,
itemBuilder: (context, index, pageViewIndex) => CarTile(
car: cars[index],
onpress: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
CarDetailsScreen(car: cars[index]))),
),
options: CarouselOptions(
scrollDirection: Axis.vertical,
enlargeCenterPage: true,
),
),
),
],
);
CarTile code is as follows:
class CarTile extends StatelessWidget {
final Car car;
final VoidCallback onpress;
const CarTile({super.key, required this.onpress, required this.car});
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return GestureDetector(
onTap: onpress,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
child: Column(
children: [
Image.network(
height: 150,
width: size.width,
fit: BoxFit.fitWidth,
car.image,
),
const SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(5)),
child: Text(
car.features[0],
style: const TextStyle(fontWeight: FontWeight.w500),
),
),
const SizedBox(
width: 5,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(5)),
child: Text(
car.features[1],
style: const TextStyle(fontWeight: FontWeight.w500),
),
),
],
),
),
Row(
children: [
Text(
'${car.brand} ${car.model}',
style: const TextStyle(fontWeight: FontWeight.w900),
),
const Spacer(),
Text(
'Tsh. ${NumberFormat.decimalPattern().format(car.price)} / hr',
style: const TextStyle(fontWeight: FontWeight.w900),
),
],
),
Align(alignment: Alignment.centerLeft, child: Text('${car.year}'))
],
),
),
);
}
}
And this is my current results

onPageChanged with Future Dialog Flutter

I am trying to get my Flutter Dialog to show page indicator dots based off the onPageChanged setState and it doesnt seem to be working. What is happening is the dots are appearing and one is highlighted but as I swipe the dots are not following the current page. Any ideas? When I add a print statement to my setState I can see the activePage is corresponding with the current index. I am at odds as to why this is not working?
Future openDialog() => showDialog(
context: context,
builder: (BuildContext context) => Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
backgroundColor: const Color(0xFF64748b),
child: Container(
height: 300.0, // Change as per your requirement
width: 300.0, // Change as per your requirement
child: Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
height: 200,
child: PageView.builder(
scrollDirection: Axis.horizontal,
pageSnapping: true,
itemCount: eqs.length,
controller: _pageController,
onPageChanged: (page) {
setState(() {
activePage = page;
// print(activePage);
});
},
itemBuilder: (context, index) {
final titles = eqs[index];
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(15.0),
child: Text(
titles.eqTitle,
style: const TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Math.tex(
titles.eq,
mathStyle: MathStyle.display,
textStyle: const TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold,
),
),
),
],
);
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: indicators(eqs.length, activePage))
],
),
),
));
List<Widget> indicators(eqsLength, currentIndex) {
return List<Widget>.generate(eqsLength, (index) {
return Container(
margin: const EdgeInsets.all(5.0),
width: 10,
height: 10,
decoration: BoxDecoration(
color: currentIndex == index ? Colors.greenAccent : Colors.black26,
shape: BoxShape.circle),
);
});
}
Hey if you're trying to have a page indicator at the bottom of your page view, you can just use a very simple package called smooth_page_indicator
Future openDialog() => showDialog(
context: context,
builder: (BuildContext context) => Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
backgroundColor: const Color(0xFF64748b),
child: Container(
height: 300.0, // Change as per your requirement
width: 300.0, // Change as per your requirement
child: Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
height: 200,
child: PageView.builder(
scrollDirection: Axis.horizontal,
pageSnapping: true,
itemCount: eqs.length,
controller: _pageController,
itemBuilder: (context, index) {
final titles = eqs[index];
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(15.0),
child: Text(
titles.eqTitle,
style: const TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Math.tex(
titles.eq,
mathStyle: MathStyle.display,
textStyle: const TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold,
),
),
),
],
);
},
),
),
// Add this
SmoothPageIndicator(
controller: _pageController, // PageController
count: eqs.length,
effect: WormEffect(), // your preferred effect
onDotClicked: (index) {})
],
),
),
),
);
But if you want to have your custom widget for the indicator, instead of updating the active page, update your current index.
Hope you find this helpful!
[AMIR SMILEY]

Flutter - show items in a list view with just the necessary length and borders

In my list view in a Flutter project, I need to show items i.e. pieces of text that are stored in a List variable. Each item (i.e. piece of text) will have rounded borders but the length of each item will vary according to the number of characters in the text. And on tapping each of the list item i.e. the piece of text, some action will take place.
Following is an image showing how the output should be:
Currently each list item takes the maximum size of the horizontally available space and text is aligned in the middle. But I want the background of each list item to be just containing the piece of text and not to be the full size horizontally and then text should be in the middle of the background. Current result is in the following image.
Code:
final List<String> names = <String>['Topic 1', 'Topic 2 ', 'Topic 3', 'Topic 4', 'Topic 5'];
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
// color: msgCount[index]>=10? Colors.blue[400] msgCount[index]>3? Colors.blue[100]: Colors.grey,
child: Container(
child: Padding(
padding:EdgeInsets.fromLTRB(3, 0,0,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
Expanded(
child: TextButton(
onPressed: () {
print("Do something!");
},
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0)),
),
backgroundColor:
MaterialStateProperty.all(
Colors.white
)),
child:Text('${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
),
]
),
),
),
);
}
)
How can I achieve the list items to be as in the 1st screenshot ?
EDIT:
The above list view is inside the following code i.e. the following code should be appended to the above code and necessary brackets should be suffixed.
SingleChildScrollView(
// child: Container(
// padding: const EdgeInsets.only(top: 80, left: 24, right: 24),
child:Container(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
Text('Select a Topich000'),
EDIT2:
I am pasting the full code (i.e. not only the list view related code as the list view is inside other code snippet) from my application below.
So when you post answer, make sure that you use the format of my full code below:
final List<String> names = <String>['Topic 1', 'Topic 2 ', 'Topic 3', 'Topic 4', 'Topic 5'];
return Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle.light,
title: const Text('Topics'),
),
body: SingleChildScrollView(
child:Container(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
Text('Select a Topic'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
child: Container(
child: Padding(
padding:EdgeInsets.fromLTRB(3, 0,0,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
Expanded(
child: TextButton(
onPressed: () {
print("Do something !");
Navigator.of(context).pushNamed("/subtopicScreen", arguments: {'index_found': index+1,
'uploadable_image_path':uploadable_image_path });
},
// );
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0)),
),
backgroundColor:
MaterialStateProperty.all(
//Colors.green[900]
Colors.white
)),
child:Text('${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
),
]
),
),
),
);
}
)
)
],
),
),
// ),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 35.0,
width: double.maxFinite,
/*decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//IconButton(icon: Icon(Icons.chat), onPressed: (){ },),
InkWell(
onTap: () {
//Navigator.pushNamed(context, "YourRoute");
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => topicScreen(),
),
);
},
child: TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('..',
style: TextStyle(
color: Colors.white,
// backgroundColor: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
backgroundColor: Colors.blue,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
),
],
),
),
),
);
}
Try removing the Expanded widget and remove minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)) from your TextButton Widget.
Code:
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
// color: msgCount[index]>=10? Colors.blue[400] msgCount[index]>3? Colors.blue[100]: Colors.grey,
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(3, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
onPressed: () {
print("Do something!");
},
style: ButtonStyle(
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(40.0)),
),
backgroundColor: MaterialStateProperty.all(
Colors.white)),
child: Text(
'${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
]),
),
),
);
})
Try below code and used UnconstrainedBox.
UnconstrainedBox means render at its natural size.
Your List:
List list = [
'Science',
'Mathematics',
'English',
'Mental Ability',
];
Your Widget:
ListView.builder(
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UnconstrainedBox(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),
child: InkWell(
onTap: () {
print('You Tapped on ${list[index]} subject');
},
child: Text(
list[index],
),
),
),
),
],
);
},
);
Result Screen->
You should try giving the widget in the builder method of the ListView.builder widget a height, specifically to your Container.
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
width: <your width here> <<<<<------
EDIT:
Working code.
final names = <String>[
'Topic 1',
'Topic 2 ',
'Topic 3',
'Topic 4',
'Topic 5'
];
return Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle.light,
title: const Text('Topics'),
),
body: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
const Text('Select a Topic'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
width: 100,
margin: const EdgeInsets.all(2),
padding: const EdgeInsets.fromLTRB(3, 0, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () {
print("Do something !");
// Navigator.of(context).pushNamed("/subtopicScreen", arguments: {'index_found': index+1,
// 'uploadable_image_path':uploadable_image_path });
},
// );
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(
const Size.fromWidth(100),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
40,
),
),
),
backgroundColor: MaterialStateProperty.all(
//Colors.green[900]
Colors.white,
),
),
child: Text(
'${names[index]} ',
style: const TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
],
),
);
},
),
)
],
),
),
// ),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 35.0,
width: double.maxFinite,
/*decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//IconButton(icon: Icon(Icons.chat), onPressed: (){ },),
InkWell(
onTap: () {
//Navigator.pushNamed(context, "YourRoute");
},
child: TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('..',
style: TextStyle(
color: Colors.white,
// backgroundColor: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
backgroundColor: Colors.blue,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
),
],
),
),
),
);

How can i expand my container as per my text length?

I have created one widget called slidercarasol in that i had done following :
Widget slidercarasol = FutureBuilder(
future: GetAlerts(device_id),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return SpinKitChasingDots(
color: Colors.white,
size: 50.0,
);
} else if (snapshot.data.length == 0) {
return Container(
height: 100,
child: Center(
child: Text(
'NO ALERTS AVAILABLE NOW',
style: TextStyle(color: Colors.white, fontSize: 18),
)),
);
} else {
return new CarouselSlider(
aspectRatio: 16 / 5,
viewportFraction: 1.0,
autoPlayInterval: Duration(seconds: 20),
onPageChanged: (index) {
setState(() {
_current = index;
});
},
autoPlay: true,
pauseAutoPlayOnTouch: Duration(seconds: 10),
items: <Widget>[
for (var ind = 0; ind < snapshot.data.length; ind++)
GestureDetector(
child: Container(
child: Text(snapshot.data[ind].que,
softWrap: true,
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
),
onTap: () {},
),
],
);
}
});
and i had called that widget in scaffold
body: Container(
color: Colors.black,
height: MediaQuery.of(context).size.height,
child: Container(
height: double.infinity,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Card(
color: Colors.black,
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Stack(
alignment: Alignment.topLeft,
children: <Widget>[
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/slideralert.png",),
fit: BoxFit.fill,
),
borderRadius: new BorderRadius.all(const Radius.circular(10.0)),
),
// color: Colors.black.withOpacity(0.5),
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.notifications,
color: Colors.white,
),
SizedBox(
height: 10,
),
slidercarasol
],
),
)
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
elevation: 5,
margin: EdgeInsets.only(right: 24.0, left: 24.0, top: 10.0),
),
otherwidget,
],
),
),
),
and i get the output like this,
i need the full text to be shown and the height of the container will be increased as per text is large in length.
i want to display full text in container if the text is short than no issue but when i get long text i am unable to display full text..
thanks in advance!
Try wrapping your slidercarasol with Flexible.
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.notifications,
color: Colors.white,
),
SizedBox(
height: 10,
),
Flexible(
fit: FlexFit.loose,
child: slidercarasol,
),
],
),