Sorry bad english.. I want to navigate from one screen to another base on id from gridview items.
when one of the listview item11 is clicked it will be directed to the detail page item11..
So, how do create a detailed page design when one of the ListView's clicks is different.
full my code:
class CategoryScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new SafeArea(
child: new Scaffold(
appBar: new BankAndaAppBar(),
body: new Container(
color: Colors.grey[100],
child: new ListView(
physics: ClampingScrollPhysics(),
children: <Widget>[
new Container(
padding: EdgeInsets.only(left: 12.0, right: 12.0, top: 12.0),
color: Colors.grey[100],
child: new Column(
children: <Widget>[
_bodyGridView(),
],
)),
],
),
),
),
);
}
Widget _bodyGridView() {
return SingleChildScrollView(
child: new Column(
children: <Widget>[
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
children: CATEGORIES_DUMMY_DATA
.map((cat) => ListCategory(cat.id, cat.title, cat.titleDetail, cat.description, cat.image))
.toList(),
),
],
),
);
}
}
I want display detailed information after clicking a gridview item. example : every clicking a item 1 show detail view item=1.
enter image description hereThanks.
As per my understanding, you want to display detailed information after clicking a grid item.
If so, there are many ways to do it.
Pass the data within pages : follow
Create a model class, store the data in memory and display it. follow
If you want to navigate from one screen to another follow
Related
I am trying to build a multi-page registration screen with each page having a Form displayed within a PageView for each and smooth sliding effect. My only trouble is when the keyboard is displayed, the Form doesn't scroll up and other fields get hidden behind the keyboard. Have a look at the screenshot.
The main registration page has Scaffold which has a Stack as body. PageView is a child of the Stack with a few other widgets, header back button and footer next button.
Below is the main registration page scaffold.
return Scaffold(
body: SafeArea(
child: Stack(
children: [
// Back Button
// Form Pages
Padding(
padding: const EdgeInsets.only(top: 40),
child: PageView.builder(
controller: _formsPageViewController,
itemBuilder: (BuildContext context, int index) {
return _forms[index];
},
),
),
// Form Button
],
),
),
);
Below is the build method of the PageView Form1 page.
Widget build(BuildContext context) {
return ConstrainedBox(
constraints:
BoxConstraints(maxHeight: MediaQuery.of(context).size.height / 2),
child: SingleChildScrollView(
physics: null,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Page Title
//... code removed for title text
// Image Avatar
// ... code removed for Avatar image
// Form
Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Column(
children: [
// Name
// ... Code removed for textbox
// Govt. Registration No
// ... Code removed for textbox
// Establishment Year and Month
Row(
children: [
// Established Month
Flexible(
child: // ... Code removed for dropdown
),
// Established Year
Flexible(
child: // .. Code removed for dropdown
)
],
),
// ... code removed for next button
],
),
),
),
],
),
),
);
} // Build
you disabled the SingleChildScrollView's physics inside the form, change it to this:
ConstrainedBox(
constraints:
BoxConstraints(maxHeight: MediaQuery.of(context).size.height / 2),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(), // <--- change to this
....
)
I'm developing a table at Flatter.
In order to process selection/unselection for each row of the table, I would like to develop a Checkbox for the header of the table and all rows.
Then, I found the showCheckboxColumn option in the DataTable widget and applied it with pleasure.
However, as shown in the picture below, the Checkbox was not applied at all, and I can't find the cause.
The DataTable widget I designed is written like the following code:
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(24, 34, 24, 24),
child: Scrollbar(
trackVisibility: true,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Selected Delete',
),
SingleChildScrollView(
padding: EdgeInsets.only(top: 19),
scrollDirection: Axis.vertical,
child: DataTable(
showCheckboxColumn: true,
headingRowColor: MaterialStateProperty.all(Color(0xFFEEEEEE)),
rows: _getTableDatas(),
columns: _getTableHeaders(),
),
),
],
),
),
),
);
}
Is there any part of this code that I'm wrong about or I'm wrong about the concept of DataTable?
According to the docs,, You need to add showCheckboxColumn property to make the row selectable. Try adding and do let me know.
I have a list of days, and a list of opening hours for each day.
I need to make the list of days scrollable, and the list of opening hours expands as necessary (= I don't want the list of opening hours to be scrollable into a defined height container).
How to make the list scrollable ?
Here is what I have so far, a list of days that is not scrollable (and I can't see sunday) :
SingleChildScrollView(
child: ListView.builder(
itemCount: _days.length,
itemBuilder: (context, i) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(18.0),
child: Text(_days[i],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[700]))),
Container(
decoration: BoxDecoration(color: Colors.white),
child: ListView.builder(
shrinkWrap: true,
itemCount: _daysDispos[i].length,
itemBuilder: (context, j) {
final dispo = _daysDispos[i][j];
return ListTile(
title: Text(dispo.address.line));
}),
)
],
);
})),
EDIT
In the first listView builder, add :
physics: NeverScrollableScrollPhysics()
Solved my issue.
A good solution would be using Expandable package, and add multiple Expandables inside a single ListView.
Another Solution would be replacing the outer ScrollView with one single ListView, whose Childs will be 7 Columns, each column contains a group of opening hours.
You can try CustomScrollView with multiple SliverLists for your purposes instead of using SingleChildScrollView:
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
Column(
children: <Widget>[
//Widgets you want to use
],
),
]),
),
SliverList(
delegate: SliverChildListDelegate([
Column(
children: <Widget>[
//Widgets you want to use
],
),
]),
),
],
);
}
I am trying to display a ListView Horizontal n times in Stack or Row. But in the end all the ListViews are piled up instead shows one by one from top to bottom.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Prueba para trabajar en el proyecto"),
),
body: Stack(
children: <Widget>[
_crearLista(),
_crearLista(),
_crearLista(),
_crearLista(),
_crearLista(),
//_crearLoading(),
],
),
);
}
Widget _crearLista() {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.25,
decoration: BoxDecoration(),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _listaNumeros.length,
itemBuilder: (BuildContext context, int index) {
//return image
},
controller: _scrollController,
),
),
)
],
),
);
}
Any suggestions? please. I want to show all the LsitViews.
A Stack widget puts its children above each other (overlapped or piled up) at the left top corner of the stack by default. Unless you position each child using a Positioned or Align widget. To have all the children one below the other (starting from top of the screen towards bottom), you need to use a Column instead of Stack.
Stack children behave like layers, one covers second, etc.
If you want one child exactly below another, there is ListView and Column
I'm trying to create a 2x2 grid for displaying some info in cards. Disclaimer: I'm totally new to Dart and Flutter, so expect a lot of ignorance on the topic here.
These cards should have a fixed size, have an image, display some text... and be positioned from left to right, from top to bottom.
First, I tried to use the Flex widget, but it seems to only work horizontally or vertically. Therefore, my only solution was to use two Flexes, but only showing the second when the amount of elements is higher than 2 (which would only use one row).
Then, I tried using GridView, but it doesn't work in any possible way. It doesn't matter which example from the Internet I copy and paste to begin testing: they just won't show up in the screen unless they're the only thing that is shown in the app, with no other widget whatsoever. I still don't understand why that happens.
This is my current code:
First widgets in "home_page.dart":
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 30)),
Text(
'App test',
style: TextStyle(fontSize: 24),
),
EventsList(key: new Key('test')),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
The "EventList" part is a widget that should represent the grid functionality I explained before. This class gets some info from a service (which currently just sends some hardcoded info from a Future), and paints the given widgets ("Card" items, basically) into the EventList view:
class _EventsListState extends State<EventsList> {
#override
Widget build(BuildContext context) {
return FutureBuilder<List<Event>>(
future: new EventsService().getEventsForCoords(),
builder: (context, AsyncSnapshot<List<Event>> snapshot) {
if (snapshot.hasData) {
return Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Flex(
direction: Axis.horizontal,
verticalDirection: VerticalDirection.down,
mainAxisAlignment: MainAxisAlignment.center,
children: generateProximityEventCards(snapshot.data),
));
} else {
return CircularProgressIndicator();
}
});
}
List<Card> generateProximityEventCards(List<Event> eventList) {
// Load Events from API
print(eventList);
// Render each card
return eventList.map((Event ev) {
return Card(
child: Padding(
padding: EdgeInsets.only(bottom: 15),
child: Column(
children: <Widget>[
Image(
fit: BoxFit.cover,
image: ev.imageUrl,
height: 100,
width: 150,
),
Padding(
child: Text(ev.name),
padding: EdgeInsets.only(left: 10, right: 10),
),
Padding(
child: Text(ev.address),
padding: EdgeInsets.only(left: 10, right: 10),
),
],
),
));
}).toList();
}
}
This is how it currently looks:
As I said before, I understand that the Flex widget can't really get that 2x2 grid look that I'm looking for, which would be something like this (done with Paint):
So, some questions:
How can I get a grid like that working? Have in mind that I want to have more stuff below that, so it cannot be an "infinite" grid, nor a full window grid.
Is it possible to perform some scrolling to the right in the container of that grid? So in case there are more than 4 elements, I can get to the other ones just scrolling with the finger to the right.
As you can see in the first image, the second example is bigger than the first. How to limit the Card's size?
Thank you a lot for your help!
The reason the gridview was not working is because you need to set the shrinkWrap property of theGridView to true, to make it take up as little space as possible. (by default, scrollable widgets like gridview and listview take up as much vertical space as possible, which gives you an error if you put that inside a column widget)
Try using the scrollable GridView.count widget like this and setting shrinkWrap to true:
...
GridView.count(
primary: false,
padding: /* You can add padding: */ You can add padding const EdgeInsets.all(20),
crossAxisCount: /* This makes it 2x2: */ 2,
shrinkWrap: true,
children: generateProximityEventCards(snapshot.data),
...
Is this what you exactly want?
do let me know so that I can update the code for you
import 'package:flutter/material.dart';
class List extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Text('Inicio', style: TextStyle(color: Colors.black, fontSize: 18.0),),
),
body: GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
children: List.generate(
50,//this is the total number of cards
(index){
return Container(
child: Card(
color: Colors.blue,
),
);
}
),
),
);
}
}