Related
I am working on the frontend project using Flutter, and I am trying to connect it to the Django backend using API, I am completely lost on how to do that, can anyone help me, I would appreciate your help. I am very new to Flutter. We have implemented all the APIs with the Django REST framework.
Here is my front-end code for the register page, this code is using Dart language.
import 'dart:io';
import 'package:flutter/services.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import './register2.dart';
class MyClip extends CustomClipper<Rect> {
Rect getClip(Size size) {
return Rect.fromLTWH(0, 0, 100, 100);
}
bool shouldReclip(oldClipper) {
return false;
}
}
class Avatar extends StatefulWidget {
#override
State<Avatar> createState() => _AvatarState();
}
class _AvatarState extends State<Avatar> {
File? image;
Future pickImage() async {
try {
final image = await ImagePicker().pickImage(source: ImageSource.gallery);
if (image == null) return;
final imageTemp = File(image.path);
setState(() => this.image = imageTemp);
} on PlatformException catch (e) {
print('Failed: $e');
}
}
#override
Widget build(BuildContext context) {
return Container(
child: image != null
? ClipOval(
child: Image.file(
image!,
width: 100,
height: 100,
fit: BoxFit.cover,
),
)
: Image.asset('assets/images/icon_sample.jpeg'),
);
}
}
class Regfirst extends StatelessWidget {
#override
Widget build(BuildContext context) {
var bg = 'assets/images/bg.jpeg';
return Material(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(bg),
fit: BoxFit.cover,
),
),
child: Container(
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 0,
height: 400,
width: 330,
child: Avatar(),
),
Positioned(
top: 350,
height: 300,
width: 330,
child: Column(
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Row(
children: [
Expanded(
flex: 3,
child: TextField(
decoration: InputDecoration(
hintText: "First name",
hintStyle: TextStyle(
color: Colors.white,
fontSize: 25,
),
labelStyle: TextStyle(
fontSize: 24, color: Colors.white),
border: UnderlineInputBorder(),
),
),
),
SizedBox(width: 40),
Expanded(
flex: 3,
child: TextField(
decoration: InputDecoration(
hintText: "Last name",
hintStyle: TextStyle(
color: Colors.white,
fontSize: 25,
),
labelStyle: TextStyle(
fontSize: 24, color: Colors.white),
border: UnderlineInputBorder(),
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
flex: 3,
child: TextField(
decoration: InputDecoration(
hintText: "Email",
hintStyle: TextStyle(
color: Colors.white,
fontSize: 25,
),
labelStyle: TextStyle(
fontSize: 24, color: Colors.white),
border: UnderlineInputBorder(),
),
),
),
SizedBox(width: 40),
Expanded(
flex: 3,
child: TextField(
decoration: InputDecoration(
hintText: "Phone number",
hintStyle: TextStyle(
color: Colors.white,
fontSize: 25,
),
labelStyle: TextStyle(
fontSize: 24, color: Colors.white),
border: UnderlineInputBorder(),
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
flex: 3,
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(
color: Colors.white,
fontSize: 25,
),
labelStyle: TextStyle(
fontSize: 24, color: Colors.white),
border: UnderlineInputBorder(),
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
flex: 3,
child: TextField(
decoration: InputDecoration(
hintText: "Confirm Password",
hintStyle: TextStyle(
color: Colors.white,
fontSize: 25,
),
labelStyle: TextStyle(
fontSize: 24, color: Colors.white),
border: UnderlineInputBorder(),
),
),
),
],
),
),
],
),
),
Positioned(
top: 680,
height: 45,
width: 250,
child: ElevatedButton(
// color: Colors.blueAccent,
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Regsec()));
},
child: Text(
'Next',
style: TextStyle(fontSize: 30),
),
),
),
],
),
),
),
);
}
}
I want to display the number of each item which is inside the list to a Card, I found some example which they said you should do it with a for() loop, and i did just that but the number isn't incrementing at all can someone show me what I'm doing wrong?
My code:
child: ScrollablePositionedList.builder(
itemScrollController: itemController,
itemCount: selectedChallenge.contestantsList.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final sortedList = selectedChallenge.contestantsList
..sort((itemOne, itemTwo) =>
itemTwo.points.compareTo(itemOne.points));
final data = sortedList[index];
// My for loop
for (var i = 0;
i < selectedChallenge.contestantsList.length;
i++,) {
return Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text('${i}'),
),
SizedBox(
height: 35,
width: 35,
child: CachedNetworkImage(
imageUrl: data.avatar,
),
),
SizedBox(
width: 12,
),
Text(
data.firstName + ' ' + data.lastName,
),
],
),
Text(data.points.toString()),
],
),
);
}
},
),
What I got:
What I want:
]
Use the index of your builder and remove the for loop
ScrollablePositionedList.builder(
itemScrollController: itemController,
itemCount: selectedChallenge.contestantsList.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final sortedList = selectedChallenge.contestantsList
..sort((itemOne, itemTwo) =>
itemTwo.points.compareTo(itemOne.points));
final data = sortedList[index];
return Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text('${index + 1}'),
),
// rest of the code
Another suggestion is to sort the list first before building it.
// sort the list first in a method or something
final sortedList = selectedChallenge.contestantsList
..sort((itemOne, itemTwo) =>
itemTwo.points.compareTo(itemOne.points));
// build it
ScrollablePositionedList.builder(
itemScrollController: itemController,
itemCount: sortedList.length,
Try below code hope its help to you.
declare one int variable
int index = 1;
Your Widget.
Text(
(index + 1).toString(),
),
Whole Widget.
SingleChildScrollView(
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(
top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: Expanded(
child: Text(
(index + 1).toString(),
),
),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style: TextStyle(
color: Colors.black87))
],
),
)));
})
],
),
),
Your result screen like->
It has some good features that I was looking for, and works with my code
I'm trying to make ToDo app, and I have problem with slidable widget. I'm putting Slidable inside the ListTile element, and it appears to overlay the parent. Actually, if I specify height of the parent list, it doesn't happen, but I can't specify the height of parent list, because it needs to be set automatically as new element is added to the list, this is why I use shrinkWrap property.
EDIT: I found package that does exactly what I need. It has some iOS-like slide features, and even some animations.
https://pub.dev/packages/flutter_swipe_action_cell
Widget build(BuildContext context) {
return Column(
children: [
Container(
margin: EdgeInsets.only(bottom: 20),
child: Container(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: this.widget.listNotes.length,
itemBuilder: (context, index) {
var content = this.widget.listNotes[index];
return Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: ListTile(
title: Container(
child: Slidable(
controller: slidableController,
actionPane: SlidableStrechActionPane(),
actionExtentRatio: 0.4,
secondaryActions: <Widget>[
SlideAction(
color: Colors.red,
child: Text(
'Delete',
style: TextStyle(
fontSize: 15, color: Colors.white),
maxLines: 1,
),
onTap: () => deleteNote(index),
),
],
child: Row(
children: [
Container(
child: Transform.scale(
scale: 1.7,
child: Radio(
toggleable: true,
value: '${index}' + 'ok',
groupValue: groupVal,
onChanged: (value) {
setState(() {
groupVal = value;
});
},
activeColor: Color(0xffFFBD11),
),
),
),
InkWell(
onTap: () {
print('object');
},
child: Container(
width: 230,
padding:
EdgeInsets.fromLTRB(0, 10, 12, 12),
margin: EdgeInsets.only(left: 5),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFFBABABA),
width: 0.5))),
child: Text(
content.note,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w300,
fontSize: 18),
),
),
),
],
),
),
),
),
),
],
);
}),
),
),
Hi #XRSIL your code is wrong, because the slidable widget must be the widget that contains the ListTile, like this example:
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: this.widget.listNotes.length,
itemBuilder: (context, index) {
return Slidable(
actionPane: SlidableDrawerActionPane(),
child: Container(
child: ListTile(title: Text('Title'),
),
));
}
)
error: The element type 'List' can't be assigned to the list type 'Widget'.
I am learning to make flutter apps and this same code is illustrated by other person who is teaching me in that video and it works fine. Maybe its a version problem.
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('₹${widget.order.amount}'),
subtitle: Text(DateFormat('dd/MM/yyyy hh:mm').format(widget.order.dateTime)),
trailing: IconButton(icon: Icon(_expanded ? Icons.expand_less :Icons.expand_more),
onPressed: (){
setState(() {
_expanded = !_expanded;
});
}),
),
if(_expanded)
Container(
height: min(widget.order.products.length * 20.0 + 10, 100),
child: ListView(
children: [
widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text('₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList()
],
),
)
],
),
);
You should remove [ ] while mapping, check below
ListView(
children: widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text(
'₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList(),
),
just remove the [] of the children of the ListView
Your code should be as follows:
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('₹${widget.order.amount}'),
subtitle: Text(DateFormat('dd/MM/yyyy hh:mm').format(widget.order.dateTime)),
trailing: IconButton(icon: Icon(_expanded ? Icons.expand_less :Icons.expand_more),
onPressed: (){
setState(() {
_expanded = !_expanded;
});
}),
),
if(_expanded)
Container(
height: min(widget.order.products.length * 20.0 + 10, 100),
child: ListView(
children:
widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text('₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList()
,
),
)
],
),
);
Since you are already creating the list of widgets in the .toList(), it shouldn't be surrounded by []
The ListView widget requires 'List of Widgets', however, you're providing it with nested list of widgets as you're using map and returning 'Rows' while converting them into a list. So, in short ListView renders list of rows inside another list.
You may use the 'Spread Operator' to resolve the issue. It will take the each Row widget in nested list and place it as a direct child of 'ListView'.
Using three dots '...' before mapping the product will resolve the error. Like this;
"...widget.order.products.map((prod) => Row("
OR
just remove the [] of the children of the ListView. It will do the same trick.
I have a 'Filter' and below that is a list of soccer matches. I Wrap 'Filter and' listview builder' with a ListView (so that the overload writing under blablabla is resolved). But there is something strange when you scroll normally. scroll to the list that doesn't work. there is only a 'glow effect', but I scroll from the 'Filter menu' above, the scroll works. How do I make the scroll run normally?
My snipped code:
Widget _buildListView(FixtureModel model, BuildContext context) {
return Container(
child: model.getFixturesCount() == 0
? Center(child: Text('No fixtures found'))
: ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10.0),
child: InkWell(
onTap: () => _onTap(context),
child: Container(
margin:
EdgeInsets.only(top: 5.0, bottom: 5.0),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 5.0),
child:
Icon(FontAwesomeIcons.github)),
Container(
padding: EdgeInsets.only(left: 15.0),
child: Text(
'Liga Premier Inggris',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w500),
),
),
Container(
padding: EdgeInsets.only(
left: 5.0, top: 2.0),
child: Icon(Icons.arrow_drop_down,
size: 17.0))
],
)),
)),
Container(
padding: EdgeInsets.only(top: 3.0),
child: Text(
'4',
style:
TextStyle(fontSize: 13.0, color: Colors.grey),
),
),
IconButton(
iconSize: 20.0,
icon: Icon(
FontAwesomeIcons.calendarAlt,
color: Colors.blue,
),
onPressed: () {})
],
),
Divider(
height: 0.0,
),
Container(
padding: EdgeInsets.only(top: 2.0),
child: ListView.builder(
shrinkWrap: true,
itemCount: model.fixtureList == null
? 0
: model.getFixturesCount(),
itemBuilder: (context, int i) {
var fixture = model.fixtureList[i];
return FixtureListItem(fixture: fixture);
},
))
],
)
],
));
}
In your ListView add:
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
To take Out Filter From ListView: remove physics: NeverScrollableScrollPhysics(), then in ListView
body: Column(
children: <Widget>[
Filter(),
Expanded(
child: ListView()
),
]
)