Related
My goal is to have a dog as my DragTarget and multiple items I can drag to the dog.
Whenever I drag one item the others are switching positions.
Also when I drag the item onto the DragTarget I want to print out a text in a text-box - but nothing is executed even though I'm using onAccept.
This is the code I have:
import 'package:flutter/material.dart';
import 'package:prototype/screens/start-page.dart';
class DragDropItems extends StatelessWidget {
const DragDropItems({super.key});
final Color color = Colors.black;
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('assets/images/Environment.png'))),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Stack(children: <Widget>[
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(top: 200),
child: DragTarget<String>(
onAccept: (data) => Padding(
padding: const EdgeInsets.all(15),
child: Column(
children: const <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'asdf',
hintText: 'gang'),
))
],
),
),
builder: (_, __, ___) {
return Container(
width: 300,
height: 300,
alignment: Alignment.center,
child: Image.asset('assets/images/Doggo3.png'),
);
},
))),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Draggable<String>(
data: 'red',
feedback: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child:
Image.asset('assets/images/cupcake1.png'),
)),
childWhenDragging: Container(),
child: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child: Image.asset('assets/images/cupcake1.png'),
),
),
),
Draggable<String>(
data: 'blue',
feedback: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child: Image.asset('assets/images/banana1.png'),
)),
childWhenDragging: Container(),
child: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child: Image.asset('assets/images/banana1.png'),
),
),
),
Draggable<String>(
data: 'green',
feedback: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child:
Image.asset('assets/images/hamburger1.png'),
)),
childWhenDragging: Container(),
child: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child:
Image.asset('assets/images/hamburger1.png'),
),
),
),
],
)))
]),
));
}
}
this is the result when executing on the emulator:
enter image description here
I would appreciate any help!
You need to provide the widget passed to the child parameter for childWhenDragging also. It is not required for both to be the same. You can use any widget.
Check this article: https://blog.logrocket.com/drag-and-drop-ui-elements-in-flutter-with-draggable-and-dragtarget/
A design like I want:
This is the current design:
Hello. How to change the position of the button and make the button design like the picture I show. I have tried to make it myself but still failed to get the design as in the picture I showed. I am new to flutter. Please guide me and hope someone is willing to help me.
This is my current code:
Container(
padding: const EdgeInsets.symmetric(horizontal: 150),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 35),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Center(
child: FutureBuilder(
future:
_getSignedURL(widget.patientProfile.avatar),
builder: (BuildContext context,
AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(
color: Colors.white,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color:
Color.fromRGBO(255, 255, 255, 0.3),
border: Border.all(
color: Colors.black12,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(200.0)),
),
),
);
} else {
return CircleAvatar(
radius: 100,
backgroundImage:
NetworkImage(snapshot.data),
);
}
},
),
),
),
],
),
),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Align(
alignment: Alignment.centerRight,
child: ButtonTheme(
minWidth: 100.0,
height: 38.0,
buttonColor: mainColor,
// ignore: deprecated_member_use
child: RaisedButton(
padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
textColor: Colors.white,
color: mainColor,
child: Text('Save'),
onPressed: () => _updatePatientProfile(),
),
),
)),
),
],
),
),
],
),
),
Play with Stack widget, there are others way of doing this.
class B extends StatefulWidget {
B({Key? key}) : super(key: key);
#override
State<B> createState() => _BState();
}
class _BState extends State<B> {
Color mainColor = Colors.blue;
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Column(
children: [
Column(
children: [
Container(
color: Colors.cyanAccent,
height: 200 + 70 + 60, // based on circle+ text space
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
// divider
Align(
alignment: Alignment(0, -.35),
child: Container(
width: constraints.maxWidth,
height: 8,
color: mainColor,
)),
Positioned(
top: 40,
left: 100,
child: Column(
children: [
CircleAvatar(
radius: 100,
),
SizedBox(
height: 70,
),
Text(
"Dumasd Text A",
textAlign: TextAlign.center,
),
],
),
),
Align(
alignment: Alignment(.7, .25),
child: saveProfile(),
)
],
),
),
],
),
],
),
),
);
}
ButtonTheme saveProfile() {
return ButtonTheme(
minWidth: 100.0,
height: 38.0,
buttonColor: mainColor,
// ignore: deprecated_member_use
child: RaisedButton(
padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
textColor: Colors.white,
color: mainColor,
child: Text('Save'),
onPressed: () {}),
);
}
}
Play with Positioned and Alignment
i have a Row inside a listview that it does not scroll with the rest of listview content i wanted to be scrollable, by the wat the cards inside the listView scrolls fine but not the row, i tried to put it inside a Stack , but still same problem
here is my code
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar()
body: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.pushNamed(context, route.Prochaines_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFe0f2f1),
),
child: Container(
child: Text(
"Prochianes",
style: TextStyle(
color: Color(0xFF30a6ca),
),
),
),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, route.EnCours_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Text("En cours"),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, route.Termines_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Text("Terminés"),
),
),
],
),
Container(width: 300, height: 200, color: Colors.black),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.red),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.yellow),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.green),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.brown),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.red),
],
),
);
i have a Row inside a listview that it does not scroll with the rest of listview content i wanted to be scrollable, by the wat the cards inside the listView scrolls fine but not the row, i tried to put it inside a Stack , but still same problem
Thanks for your help.
Please try this:
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
// Navigator.pushNamed(context, route.Prochaines_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFe0f2f1),
),
child: Container(
child: Text(
"Prochianes",
style: TextStyle(
color: Color(0xFF30a6ca),
),
),
),
),
),
GestureDetector(
onTap: () {
// Navigator.pushNamed(context, route.EnCours_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Text("En cours"),
),
),
GestureDetector(
onTap: () {
// Navigator.pushNamed(context, route.Termines_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Text("Terminés"),
),
),
],
),
Expanded(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Container(width: 300, height: 200, color: Colors.black),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.red),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.yellow),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.green),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.brown),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.red),
],
),
),
],
),
You can change the widget row to a ListView and do the following:
Widget myWidget() {
return SizedBox(
height: 100, // Important to set a high
child: ListView(
scrollDirection: Axis.horizontal, // Set the scroll direction
shrinkWrap: true, // Set the shrinkWrap to true
children: <Widget>[
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
// You can add as many as you want ...
],
),
);
}
i want to achieve to set text width and height its parent size. this is what i tried but its not working:
Container(
height: double.infinity,
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
_onPagerTabItemClicked(0);
},
child: Container(
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(color: getTextColor(0))),
)),
GestureDetector(
onTap: () {
_onPagerTabItemClicked(0);
},
child: Container(
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(color: getTextColor(0))),
)),
GestureDetector(
onTap: () {
_onPagerTabItemClicked(0);
},
child: Container(
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(color: getTextColor(0))),
)),
],
),
),
),
after i used this above code then text width and height is still wrap_content.(i investigated it by giving backgroundcolor to text). How to achieve it?
ps :in the code block that i share the container width and height is
infinite so if i try to surround it with SizedBox.expand its not working.
You can achieve this by Wrapping the Text widget inside a FittedBox with fit: BoxFit.fill so that it occupies all the available space.
Container(
height: double.infinity,
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
buildItem(Colors.red),
buildItem(Colors.green),
buildItem(Colors.blue),
],
),
),
);
Widget buildItem(Color color) {
return Expanded(
child: Container(
height: double.infinity,
color: color,
child: FittedBox(
fit: BoxFit.fill,
alignment: Alignment.center,
child: GestureDetector(
onTap: (){},
child: Text(
"Günlük",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
),
),
),
);
You can use SizedBox.expand() to achieve this
Container(
height: 200,
width: 200,
child: SizedBox.expand(
child: Text("Lorem ipsum"),
),
)
PS:
Hi, Ali, I understand what you are looking for but I think it is not possible because the text has no the width or height attributes, it is not something like container, column, etc., It can not expand like them. Even if you look at the view with debug paint open, you won't see the lines that envelop the Text. It looks it is not like TextView for native android.
If you want to achieve this you need to wrap it with a container like I did for the first item of the row. So instead of trying to make the “Text” match_parent, you need to deal with the wrapper of the Text.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.white,
height: double.infinity,
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: GestureDetector(
onTap: () {
// _onPagerTabItemClicked(0);
},
child: Container(
color: Colors.red,
width: double.infinity,
height: double.infinity,
child: Container(
color: Colors.purple, //here is the wrapper container
child: Text("Günlük",
style: TextStyle(
color: Colors.black,
backgroundColor: Colors.white)),
),
)),
),
Expanded(
child: GestureDetector(
onTap: () {
// _onPagerTabItemClicked(0);
},
child: Container(
color: Colors.green,
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(
color: Colors.black,
backgroundColor: Colors.white)),
)),
),
Expanded(
child: GestureDetector(
onTap: () {
// _onPagerTabItemClicked(0);
},
child: Container(
color: Colors.blue,
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(
color: Colors.black,
backgroundColor: Colors.white)),
)),
),
],
),
),
),
),
);
}
You should wrap every child with Expanded. Here is an example
Container(
height: double.infinity,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: GestureDetector(
onTap: () {
print("red");
},
child: Container(
color: Colors.red,
width: double.infinity,
height: double.infinity,
child:
Text("Günlük", style: TextStyle(color: Colors.black)),
)),
),
Expanded(
child: GestureDetector(
onTap: () {
print("abmer");},
child: Container(
color: Colors.amber,
width: double.infinity,
height: double.infinity,
child:
Text("Günlük", style: TextStyle(color: Colors.black)),
)),
),
Expanded(
child: GestureDetector(
onTap: () {
print("green");},
child: Container(
color: Colors.green,
width: double.infinity,
height: double.infinity,
child:
Text("Günlük", style: TextStyle(color: Colors.black)),
)),
),
],
),
),
)
I want to add a list of Container inside a Column widget.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
fixedContainer(context),
),
Widget fixedContainer(BuildContext context) {
return ListView(
children: <Widget>[
FutureBuilder<List<AddCash>>(
future: future,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children:
snapshot.data.map((todo) => nameColumn(todo)).toList());
} else {
return SizedBox();
}
},
),
],
);
}
Widget nameColumn(AddCash addCash) {
return Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
'name: ${addCash.name}',
),
);
}
It's getting an error saying Vertical viewport was given unbounded height. Do I need to set the height? I didn't set the height because I need to add the Container dynamically.
Entire Code
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../data/repository_service_addcash.dart';
import '../models/addcash.dart';
class CalendarPage extends StatefulWidget {
#override
_CalendarPageState createState() => _CalendarPageState();
}
class _CalendarPageState extends State<CalendarPage> {
Future<List<AddCash>> future;
int id;
#override
initState() {
super.initState();
future = RepositoryServiceAddCash.getAllAddCash();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
//THE FIRST COLUMN NEEDS TO BY DYNAMICALLY PRODUCDED
// nameColumnContainer(context),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"ONE",
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"TWO",
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"THREE",
),
),
],
),
Flexible(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
// children: getDaysInWeek(),
children: <Widget>[
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"A",
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"B",
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"C",
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"D",
),
),
],
),
),
Container(
child: Row(
children: <Widget>[
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"H",
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"F",
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"3000",
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"4000",
),
),
],
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
"two",
),
),
],
),
),
)
],
),
),
);
}
Widget nameColumnContainer(BuildContext context) {
return ListView(
shrinkWrap: true,
children: <Widget>[
FutureBuilder<List<AddCash>>(
future: future,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children:
snapshot.data.map((todo) => nameColumn(todo)).toList());
} else {
return SizedBox();
}
},
),
],
);
}
Widget nameColumn(AddCash addCash) {
return Container(
alignment: Alignment.center,
width: 120.0,
height: 60.0,
color: Colors.white,
margin: EdgeInsets.all(4.0),
child: Text(
'name: ${addCash.name}',
),
);
}
}
You could set shrinkWrap: true to the ListView.
shrinkWrap property
If the scroll view does not shrink wrap, then the scroll view will
expand to the maximum allowed size in the scrollDirection. If the
scroll view has unbounded constraints in the scrollDirection, then
shrinkWrap must be true.