I'm trying to select many items with same values, but I don't know how do it.
I have two Cards, inside two Containers with Id = 1 and Id = 2,
when I select a container, I use different color in Container to show if is selected or not.
But, in second Card is showing my first selection on first Card. Because I'm using same Id's.
How can I make different selection with same values?
And how can I do that with many Cards?
I did this example to show you easily. Because I'm trying to split my code in Widgets, now is very large code.
This is my code:
GestureDetector(
onTap: () {
isSelected = true;
selectedId = list[index].id;
},
child: Obx(
() {
return Padding(
padding: const EdgeInsets.all(2.0),
child: selectedId == list[index].id
? Column(
children: [
Container(
decoration: BoxDecoration(
border:
Border.all(width: 2, color:
Colors.red),
),
I'm using this in a separated widget.
I'm trying to re-use the widget. And sometimes can be same ID
I'm using Getx
Related
I have Form with Text and TextFormFields in TableRows to capture some user data. Some of the rows are empty depending on the type of data being entered and so I have used SizedBoxes to maintain a fixed height for all rows so that the 'Save' button at the bottom of the form doesn't move about when showing filled/blank rows (this seemed to be the recommended approach based on an internet search).
Before I added the SizedBox widgets, the Text and TextFormFields were aligned nicely by defaultVerticalAlignment: TableCellVerticalAlignment.middle at the Table level. Now that I have added the SizedBox widgets I can't see now how to align these items.
I have searched online, but can't find an answer to this question. The Flutter guidance on TableRow says that, "The alignment of individual cells in a row can be controlled using a TableCell", but I can't see any guidance on how this is achieved. I have tried using TableCellVerticalAlignment, but that doesn't appear to have the desired effect.
Does anyone know how to get these fields to align so that the text in Text widget and text in TextFormField are aligned as per the "Without SizedBox" screen shot below?
Code snippet and screen shots below showing without and with SizedBox widgets.
Code Snippet Showing TableRow and TableCells using SizedBox...
class _InputFormState extends State<InputForm> {
final _formKey = GlobalKey<FormState>();
final double _height = 50;
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Table(
defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
columnWidths: const {
0: FlexColumnWidth(1.5),
1: FlexColumnWidth(3)
},
children: [
//
// Instrument name
//
if (widget._record.isInstrument || widget._record.isFrequency)
TableRow(children: [
SizedBox(
height: _height,
child: const TableCell(
verticalAlignment: TableCellVerticalAlignment.bottom,
child: Text('Instrument:'),
),
),
SizedBox(
height: _height,
child: TableCell(
verticalAlignment: TableCellVerticalAlignment.bottom,
child: TextFormField(
initialValue: widget._record.instrument,
maxLines: 1,
inputFormatters: [
FilteringTextInputFormatter.allow(
RegExp(r'[A-Z a-z-]')),
LengthLimitingTextInputFormatter(35),
],
onChanged: (value) {
setState(() {
widget._record.addInstrument = value;
});
},
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter an instrument name';
}
return null;
},
),
),
),
]),
...
Alignment With SizedBox:
Alignment Without SizedBox:
I have managed to do this by wrapping the Text widget within the TableCell with an Align and setting the alignment to Alignment.CenterLeft.
Whilst working this out, I discovered that if a Tablecell doesn't have Table (or presumably TableRow) as a parent then Flutter will thrown an error stating, "Incorrect use of ParentDataWidget Error in Flutter". More information on that error here. For me, this wasn't consistent, i.e. some runs would work fine and some runs would throw the error. To get around this problem, I have put the SizedBox and the Align widgets inside the TableCell. This works fine for me. Just wanted to flag this up as well since the advice I found, and quoted in my question, that said wrap the TableCell in a SizedBox would lead to this problem.
Solution code snippet below:
TableCell(
child: SizedBox(
height: _height,
child: Align(
alignment: Alignment.centerLeft,
child: Text(_label),
),
),
);
I have a view, dashboard.dart, and in this file i have conditional views in which i created a different file for the individual views i'm rendering.
How do i render a conditional dialog that fills the whole screen instead of a widget?
I tried creating a widget that uses showGeneralDialog and then pass the widget to my dashboard.dart file but it seem i don't know how to go about it.
I need ideas or help
I have a snippet of my dashboard.dart file which at the end checks if the user is subscribed or not:
Widget content(context) {
return Obx(() => Column(
children: [
Expanded(
child: ListView(
padding: const EdgeInsets.only(
top: 40, left: 20, right: 20, bottom: 20),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
AppLocalizations.of(context)!.welcome +
" ${user.firstName}",
style: const TextStyle(fontSize: 20)),
if (user.userType == "player")
InkWell(
onTap: () {
CustomSnackBar().show(
'${user.profileViews ?? "0"} profile views');
},
child: InkWell(
onTap: () {
playersController.fetchPlayerInfo(
context, user.id);
TabRouting()
.pushScreen(context, const PlayerInfo());
},
child: CircleAvatar(
backgroundImage: NetworkImage(
"${dotenv.env['BACKEND_URL']}${user.photo?.replaceAll("public", "storage")}"),
),
),
)
],
),
///SHOW SUBSCRIPTION STATUS
if (servicesController.subscription.isEmpty &&
!servicesController.loading &&
user.userType != "club_official")
const SubscriptionNotice(),
And the widget i'm returning is SubcriptionNotice().
What i'm asking is how do i show a dialog if the user is not subscribed and pass it to that condition?
If i can use a widget, how do i configure this widget?
I tried using showGeneralDialog in my SubscriptionNotice widget but i can't seem to go about it.
You can use simple switch something like
showDialog ?? dialogWichYouWantToShow: OtherWidget
You eneter this screen and will see OtherWidget
When condition showDialog changes (use setState or something) it should display dialogWichYouWantToShow
I am trying to implement a grid animation similar to what's shown in the gif below.
I know of AnimateList widget which does a similar thing for lists. However, I want to implement it for a GridView and AnimateList doesn't let me specify the column count per row.
Is there a package or plugin that let's me implement the desired animation on change of the underlying data structures's state, such as, on updated search/updated filter or sort criteria? Or how else do I implement this?
Check this package called shaky_animated_listview in pub.dev, it provides an animation called Shaking Grid which look like the following:
The above animation can be implemented easily like the following:
GridView.count(
crossAxisCount: 3,
// shrinkWrap: true,
children: List.generate(9, (i) => GridAnimatorWidget(
child: Padding(
padding: const EdgeInsets.all(4),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(10)),
child: Container(
color: Colors.grey,
),
),
),
),).toList()
)
I'm new to flutter and have been trying to get a list of chipsets wrapped in a Wrap widget with the ability to add more of them through a button shown in the image. However, the button isn't able to wrap along with the chipset horizontally. Below is an image of the design to make it clearer.
Code:
Container(
child: Wrap(
children: [
Container(
child: Wrap(
children: _chipsetList,
),
),
SizedBox(width: 2),
Container(
height: 35,
width: 35,
child: FittedBox(
child: FloatingActionButton(
heroTag: null,
elevation: 0,
shape: StadiumBorder(
side: BorderSide(width: 2.0)),
onPressed: () {
_getMoreChips(context);
},
child: Icon(Icons.add),
),
))
],
),),
I tried to experiment with SingleChildScrollView property or with Wrap direction but in vain. What could be a way to get this design working?
Seems you want to put chips and the button in the single wrap. To do so, combine them in a single list and use this list as wrap's children
List<Widget> items = List.from(_chipsetList); // copy
Widget button = FloatingActionButton();
items.add(button);
Wrap(
children: items,
)
Or, using spread operator
Wrap(
children: [
..._chipsetList,
FloatingActionButton(),
],
)
I have a Set<String> variable containing a list of image files. In a Card object, in addition to some Text elements, I want to create a gallery of images like this:
The number of images stored in Set<String> is variable. If possible, I want to show in a corner (top-right) the current number image and the total count of images (e.g. 1/5).
The images will be withdrawn from a webserver, and I don't know if it's more efficient to save them in cache or not. I don't want to use storage folder to save the images.
If possible, I would to withdraw all the images in a single http request, to save time.
Here the variable:
Set<String> _photosList = {
'http://myhost.com/image01.jpg',
'http://myhost.com/image02.bmp',
'http://myhost.com/image03.png',
'http://myhost.com/image04.gif',
};
There are certain things which I want you to explore before actually jumping into the code. These are:
PageView class, this will help you know about how this scrolling thing works like Gallery View. Also, will tell you how the nextPage and previousPage works with the icon clicks
PageController class how the pages works inside the PageView
Stack class, for aligning your arrow on top of your gallery
Let us now jump to the code how it works. Follow the comments to know about each work
// this will keep track of the current page index
int _pageIndex = 0;
// this is your page controller, which controls the page transition
final PageController _controller = new PageController();
Set<String> _photosList = {
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqRwpDKN_zJr1C7pPeWcwOa36BtPm4HeLPgA&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSgjZ8pw5WLIGMBibVi_g4CMlSE-EOvrLv7Ag&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQUuMIENOhc1DmruZ6SwLc7JtrR6ZMBRAb3jQ&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRzasDrBHWV-84vxbmlX7MTuz3QHqtT8jtTuA&usqp=CAU'
};
Now the UI of the Gallery View.
Please note: This code supports, swipe functionality in the view. If you want to disable it just add this line inside your Pageview.builder()
physics:new NeverScrollableScrollPhysics()
Container(
// use MediaQuery always, it will always adjust the dimensions
// according to different screens
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width * 0.4,
// here is your stack
child: Stack(
children: [
// PageView.builder is just the part of PageView, read through
// Documentation, and you will get to know
PageView.builder(
controller: _controller,
// here you can remove swipe gesture. UNCOMMENT IT
// physics:new NeverScrollableScrollPhysics()
onPageChanged: (index){
// with each change updating the index of our variable too
setState(() => _pageIndex = index);
},
itemCount: _photosList.length,
// building the view of our gallery
itemBuilder: (BuildContext context, int position){
return Align(
alignment: Alignment.topLeft,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(_photosList.elementAt(position))
)
)
)
);
}
),
// this will come over the images, the icon buttons
Positioned(
left: 0.0,
right: 0.0,
top: MediaQuery.of(context).size.height * 0.12,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: (){
// checking if we are not on pos = 0
// then we can always go back else do nothing
if(_pageIndex != 0)
_controller.previousPage(duration: Duration(milliseconds: 200), curve: Curves.easeIn);
},
icon: Icon(Icons.arrow_back_ios, color: Colors.white, size: 28.0)
),
IconButton(
onPressed: (){
// checking if we are not on pos = photosList.length - 1
// we calculate 0 to length-1
// then we can always go forward else do nothing
if(_pageIndex < _photosList.length-1)
_controller.nextPage(duration: Duration(milliseconds: 200), curve: Curves.easeIn);
},
icon: Icon(Icons.arrow_forward_ios, color: Colors.white, size: 28.0)
),
]
)
)
]
)
)
Result
Pointer: In order to show them numbering on the corner. just make use of two variables which is already there for you in the code
_pageIndex, keeps an update of the page changes
_photosList.length, which gives you the total count of the images
Do something like this, and show it using Container in the same view.
//_pageIndex + 1, cos it starts from 0 not 1, and goes up to 4 not 5
Text('${_pageIndex+1}/$_photosList.length')