The Problem is when I change width of the container of the UserMessage it does not change it it changes only the height.
I got this container it is basically a where the live chat is in.
child: Listener(
onPointerDown: _chatTouchedTrue,
onPointerUp: _chatTouchedFalse,
child: Container(
width: 130, //it only changes when I edit it here
height: 230,
child: AnimatedList(
key: listKey,
controller: _listScrollController,
initialItemCount: names.length,
itemBuilder:
(context, index, animation) {
return slideMessage(
context, index, animation);
})))
This is the Animation for how the new messages should slide in.
Widget slideMessage(BuildContext context, int index, animation) {
String userName = names[index];
String message = messages[index];
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 1),
end: Offset(0, 0),
).animate(animation),
child: UserMessage(
userName: userName,
message: message,
));
}
And this is the child of the Animation (UserMessage(..)) this is how the text message will look at the end.
Padding(padding: EdgeInsets.all(1.3),
child: Container(
width: 10, //it does not change the width here
height: 17,
child: Align(
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: widget.userName,
style: TextStyle(
decoration: TextDecoration.none,
fontWeight: FontWeight.bold,
fontSize: 9,
color: Color.fromRGBO(255, 250, 250, 100)),
),
TextSpan(
text: widget.message,
style: TextStyle(
decoration: TextDecoration.none,
fontWeight: FontWeight.bold,
fontSize: 9,
color: Color.fromRGBO(220, 220, 220, 100)),
)
]),
),
alignment: Alignment.center,
),
decoration: BoxDecoration(
color: const Color.fromRGBO(1, 1, 1, 0.2),
borderRadius: BorderRadius.circular(9),
),
));
your problem is pretty clear and you can read about it in the official documentation for the container class: https://api.flutter.dev/flutter/widgets/Container-class.html
When the parent of the container widget doesn't provide bounded constraints then the container wraps around its child to be as small as possible.
So in order to fix the issue and get what you want simply add SizedBox for the parent of your container and set the width and height in the SizedBox.
Related
I am trying to spaceevenly an Icon() and a AutoSizeText() in a Row().
When the amount is long as you can see in the attached images it renders as expected, but when the amount is zero or pretty short, the AutoSizeText() is being centered, but this causes that the same distance from the edges is no longer maintained. There is an extra distance caused by the centering. I do not know how to fix this.
Edit. If it wasn't clear, I'm referring to the pink shopping bag icon and the amount showed in the "Riepilogo Settimanale" section. If you look at the Restaurant Icon and its amount, you can notice how they are not centered, they are closer to the left edge.
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
width: size.width * 0.3,
height: size.height,
// height: size.height * 0.055,
child: Row(
children: [
Spacer(),
Expanded(
flex: 3,
child: Container(
child: LayoutBuilder(
builder: (context, constraint) {
return Icon(
icona,
color: colore,
size: constraint.biggest.width * 1,
);
},
),
),
),
Spacer(),
Expanded(
flex: 6,
child: Center(
child: AutoSizeText(
importo,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: colore,
),
maxLines: 1,
),
),
),
Spacer(),
],
),
)
If I understood you correctly, you want to right-align the text, not center them.
To achieve that, consider using a single Spacer() in-between the icon and the text. The outside spacing (margin and padding) can be done using Padding widget instead.
This is my emulator image which is showing the problem, I also use my mobile but it same condition
I having problems when my container height is more than 100. I can solve my problem by using SingleChildScrollView. But I want to scroll my only my list portion and that's why I don't wanna use SingleChildScrollView. Will my container size increase or container height increase show any render problem?
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../models/transaction.dart';
class TransactionList extends StatelessWidget {
final List<Transaction> transaction;
TransactionList(this.transaction);
#override
Widget build(BuildContext context) {
return Container(
height: 200,
// height: 300, when i use 300 then the problem occures.
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (ctx, index) {
return Card(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.purple,
width: 2,
),
),
padding: EdgeInsets.all(10),
child: Text(
'\$${transaction[index].amount.toStringAsFixed(2)}',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.purple,
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
transaction[index].title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Text(
DateFormat.yMMMd().format(transaction[index].date),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[600],
),
)
],
)
],
),
);
},
itemCount: transaction.length,
),
);
}
}
Wrap your MainScreen with SingleChildScollView Widget
I have solved this problem. But now my whole screen is scrollable. but it's ok now. I will manage. I add SingleChildScroll... in my main. Now it's ok to use.
This is the code I have written in my home.dart file.
SliverToBoxAdapter(
child: Container(
width: MediaQuery.of(context).size.width,
height: 245,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount:10,
itemBuilder: (context, index) {
return VideoCard(long: true);
}
),
),
),
This is the VideoCard() class
class VideoCard extends material.StatelessWidget {
final bool long;
const VideoCard({
#material.required this.long,
material.Key key,
}) : super(key: key);
#override
material.Widget build(material.BuildContext context) {
return material.Padding(
padding: const material.EdgeInsets.all(10.0),
child: CardWidget(
gradient: false,
button: true,
width: long ? 360 : 180,
child: material.Column(
mainAxisAlignment: material.MainAxisAlignment.start,
children: <material.Widget>[
material.Container(
width: long ? 360 : 180,
height: 90,
decoration: material.BoxDecoration(
image: material.DecorationImage(
image: material.AssetImage('assets/images/bitcoin.png'),
fit: material.BoxFit.contain),
borderRadius: material.BorderRadius.only(
topLeft: material.Radius.circular(10),
topRight: material.Radius.circular(10),
),
),
child: material.Text(""),
),
material.Padding(
padding: const material.EdgeInsets.all(8.0),
child: material.Text(
"BITCOIN - A pioneer in Crypto!",
overflow: material.TextOverflow.ellipsis,
maxLines: 2,
style: material.TextStyle(
color: material.Colors.white,
fontFamily: 'Red Hat Display',
backgroundColor: material.Colors.black,
fontSize: 16),
),
),
material.Padding(
padding: const material.EdgeInsets.symmetric(horizontal: 8.0),
child: material.Row(
children: <material.Widget>[
material.Icon(BoxIcons.bx_bar_chart_alt_2, size: 16),
material.Text(
"Beginner",
style: material.TextStyle(
color: material.Color(0xFFADADAD),
fontFamily: 'Red Hat Display',
fontSize: 10),
),
material.Spacer(),
material.Text(
"10 mins",
style: material.TextStyle(
color: material.Color(0xFFADADAD),
fontFamily: 'Red Hat Display',
fontSize: 10),
),
material.Icon(BoxIcons.bx_timer, size: 16),
],
),
),
material.Spacer(),
material.Padding(
padding: const material.EdgeInsets.only(top: 6.0),
child: material.GestureDetector(
child: material.Container(
padding: material.EdgeInsets.fromLTRB(0, 14, 0, 14),
decoration: material.BoxDecoration(gradient: Colors().waves),
child: material.Row(
mainAxisAlignment: material.MainAxisAlignment.spaceEvenly,
children: <material.Widget>[
material.Icon(BoxIcons.bx_play_circle,
color: material.Colors.black),
material.Text(
"Learn it",
style: material.TextStyle(
color: material.Colors.black,
fontFamily: 'Red Hat Display',
fontSize: 18),
)
],
),
),
onTap: () {
material.Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => VideoPage(),
),
);
},
),
),
],
),
),
);
}
}
This is the result I got.
But I want unique text,image for every card(list).
The dedign for every list should be same. But text,image,onTap() gesture should be different for every card(list) .
Is my logic is wrong?
Any answer is appreciated!
You've hard coded the text, image and onTap. You should pass the data from the map or list and use [index] to tell your code that card with index 0 in the list, should use text with index 0, and card with index 1, should use text with index 1.
If the items in your list will not change, and you want to hardcode them, you can do that without .builder. You can simply use ListView widget. You can also use Row and/or Column widgets.
ListView(
child: Column(
children[
Card(),
Card(),
Card()
]))
If you want a two column design, create two Columns or ListView inside a Row widget.
You can pass parameters to the constructor of VideoCard like VideoCard(text: textFromListView, image: imageFromListView). In VideoPage you can do like this as well like VideoPage(text: textFromVideoCard, imaeg: imageFromVideoCard);
In VideoCard onTap() you can do like
onTap: () {
material.Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => VideoPage(text: textFromVideoCard, image: imageFromVideoCard),
),
);
},
Then in VideoPage you can access to text and image that you want to. Happy coding.
I have a situation where 2 Textfields are placed inside a Stack Widget overlapping one another. Is there anyway i can scroll both the textfields together vertically if the data exceeds the size of the screen?
Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(15, 8, 0, 0),
child: SyntaxView(
code: codeController.text,
syntax: Syntax.C,
syntaxTheme: SyntaxTheme.gravityDark(),
withZoom: true,
withLinesCount: true),
),
Container(
width: 362,
padding: EdgeInsets.fromLTRB(55, 12, 0, 0),
child: TextFormField(
scrollPhysics: NeverScrollableScrollPhysics(),
focusNode: codeFocus,
controller: codeController,
autofocus: true,
keyboardType: TextInputType.multiline,
maxLines: null,
style: TextStyle(
color: Color(0x00ffffff),
// color: Colors.yellow,
height: 1.35,
fontFamily: "CodeFont",
fontSize: 12,
),
decoration: InputDecoration(
border: InputBorder.none,
),
onChanged: (value) {
setState(() {
CODE = value;
// print("X : ${codeController.text}");
});
},
),
),
],
),
A simple way way to handle that situation is to wrap your content in a ListView, which handles scrolling of its children. Here's a snippet from the ListView docs as an example:
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
https://api.flutter.dev/flutter/widgets/ListView-class.html
so im using provider and change notifier, the problem is when i change the state and notifiy listeners in the same file the user interface is updated, but when i try to access the same data from the model in another screen it still keeps the original or first version and not the updated version, the class in the other file is even using change notifier provider and a consumer just as the file with the modal class inside but is not changing the value, its only keeping the initial value, the second file only has changenotifierprovider and consumer, but it only displays the initial not the updated but the first file with the model class, and change notifier function is displaying the updated version in its widgets
this is the part of my first where i created my changenotifier, theres more but it was long so i just added this part, but all widgets here display the updated state
class MyModel with ChangeNotifier{
String datesChosen = "Click here";
String checkin;
String checkout;
String email;
String name;
String roomtype = "Click here";
String phonenumber;
String hotelname;
void updateData1 (data){
datesChosen = data;
print(datesChosen);
notifyListeners();
}
void updateData2 (data){
roomtype = data;
print(roomtype);
notifyListeners();
}
And this is my second screen, which only displays the intial states even after they are updated in the frst screen
import 'package:flutter/material.dart';
import 'package:hotel_search/common/theme.dart';
import 'package:hotel_search/sliding_bottom_sheet_content.dart';
import 'package:hotel_search/home_page.dart';
import 'package:provider/provider.dart';
class BookScreen extends StatefulWidget {
#override
_BookScreenState createState() => _BookScreenState();
}
class _BookScreenState extends State<BookScreen> {
#override
void initState() {
super.initState();
/*Future.delayed(Duration(milliseconds: 1000)).then((v) {
Navigator.pop(context);
});*/
}
#override
Widget build(BuildContext context) {
final themeData = HotelConceptThemeProvider.get();
return ChangeNotifierProvider<MyModel>(
create: (context) => MyModel(),
child: MaterialApp(
home:Scaffold(
backgroundColor: Colors.grey[50],
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
elevation: 0,
titleSpacing: 0,
backgroundColor: Colors.white,
title: Text(' ' ,style: TextStyle(
color: Colors.black,
fontFamily: 'Montserrat',
fontSize: 20,
))
)
,
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 40,),
Container(
width: MediaQuery.of(context).size.width - 100,height: 100,
child:Image.asset(
"assets/images/brand.png",
width: 0,
height:0,
fit: BoxFit.cover,)),
Divider(
height: 25,
color: Colors.grey[300],
),
Container(
padding: EdgeInsets.only(left:20,top:20, bottom: 20),
width: MediaQuery.of(context).size.width,
child:Text('Review \nYour Booking' ,style: TextStyle(
color: Colors.black,
fontFamily: 'Montserrat',
fontSize: 30,
))
),
Divider(
height: 25,
color: Colors.grey[300],
),
Container(
padding: EdgeInsets.only(left:20,top:20),
width: MediaQuery.of(context).size.width,
child:Text("HOTEL NAME" ,style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20,
fontWeight: FontWeight.w700,
))
),
Row(
children: <Widget>[
Consumer<MyModel>(
builder: (context, myModel, children){
return
Container(
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(left:20,top:5),
width: 200,
child:Text(myModel.datesChosen.toString() ,style: TextStyle(
fontSize: 13,
fontFamily: 'Montserrat',
))
),
Container(
padding: EdgeInsets.only(left:20,top:5),
width: 200,
child:Text(myModel.roomtype.toString(), style: TextStyle(
fontSize: 13,
fontFamily: 'Montserrat',
)),
)
,
Container(
padding: EdgeInsets.only(left:20,top:5),
width: 200,
child:Text("CHECK IN AND OUT TIME" ,style: TextStyle(
fontSize: 13,
fontFamily: 'Montserrat',
))),
Container(
padding: EdgeInsets.only(left:20,top:5),
width: 200,
child:Text("TYPE OF ROOM CHOSEN" ,style: TextStyle(
fontSize: 13,
fontFamily: 'Montserrat',
)))
]
)
);}),
Spacer(),
Container(
margin: EdgeInsets.only(right:20),
width: 150 ,
height:120,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("img/card.jpg"), fit: BoxFit.cover),
color: Colors.grey[300],
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10), boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 2,
blurRadius: 5,
offset: Offset(0, 3), // changes position of shadow
)
])
)
]
),
SizedBox(height: 60),
Divider(
height: 25,
color: Colors.grey[300],
),
SizedBox(height:20),
Container(
color: Color(0xff008d4b),
height: 60,
width: MediaQuery.of(context).size.width -50,
child:FlatButton(
onPressed: () {
/*...*/
},
child: Text(
"Book Now", style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat',
fontSize: 20,
),
),
),
)
]
),
)
)
)));
}
}
Have a look here at one of my more detailed answers about using the Provider. I think what you're missing is wrapping the application with a Provider Widget and calling setState(() {}); when you make those changes.
P.S. Please use Ctrl + Alt + L inside the editor to indent the code properly before asking a question. What you posted is barely readable. Also, you might wanna consider splitting up your code into multiple files and not just create the whole app in main.dart. You know... just some organizing here and there.