How to keep position of widget - flutter

I'm trying to add animation to letters as you can see below. The problem I'm facing is that, when I change the size of the selected letter, other elements are moving. I could not find a way to keep the position of the other letters. Any ideas?
return Container(
color: Colors.orange,
padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: RowSuper(
alignment: Alignment.center,
innerDistance: -20,
children: [
nodes[0],
ColumnSuper(
alignment: Alignment.center,
innerDistance: -5,
children: [
nodes[1],
nodes[2],
],
),
nodes[3],
]));
return TweenAnimationBuilder(
tween: Tween<double>(begin: 0, end: 1),
duration: Duration(milliseconds: 2000),
builder: (BuildContext context, double _val, Widget child) {
return Opacity(
opacity: _val,
child: HiveNode(
index: index,
child: Container(
height: _val * size,
width: _val * size,
decoration: ShapeDecoration(
color: nodeColor,
shape: PolygonBorder(
sides: 6,
rotate: 90.0,
borderRadius: 8.0,
border: BorderSide(color: Colors.grey, width: 0.1)),
shadows: [
BoxShadow(
color: Colors.grey.withOpacity(0.6),
spreadRadius: 0,
blurRadius: 7,
offset: Offset(-3, 6), // changes position of shadow
),
],
),
child: Center(
child: Text(char,
style: TextStyle(
fontSize: 34,
fontWeight: FontWeight.bold,
color: textColor)),
))),
);
});

I could solve with Stack approach. Here is the answer if anybody needs something similar in future.
return Container(
color: Colors.orange,
width: 360,
height: 400,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(left:0, top:80, child: nodes[0]),
Positioned(left:0, bottom:80, child: nodes[1]),
Positioned(top:20, child: nodes[2]),
Positioned(left:120, top:140, child: nodes[3]),
Positioned(bottom:20, child: nodes[4]),
Positioned(right:0, top:80, child: nodes[5]),
Positioned(right:0, bottom:80, child: nodes[6]),
],
)
);

Related

Retrieve list data using sharedPreferences in Flutter

I have Object list, my list is built with multiple types of data (Int, String, List of bool, list of String, bool...), from that list I want to save the data of some bool variables (for example when I tap a button). Is there any way to save that changed bools instead of save all the data? If the only way to save the data is saving all the list, how I can do that?
I see on internet that I have to map my list first in order to get it back later, only with map because my list is not a list of Strings, however I don't understand how to implement that, and how to get data back later, any idea ?
Example of one list I used:
import 'dart:ui';
class DefinitiveList {
int id;
String num;
String name;
bool like; //variable I want to save
bool catched; //variable I want to save
DefinitiveList(
this.id,
this.num,
this.name,
this.like,
this.catched
);
}
final List<DefinitiveList> definiti = [ //DefinitiveList is a class
DefinitiveList(
1, //id,
"88", //num
"Eli", //name
true, //like
false, //catched
),
DefinitiveList(
2, //id,
"17", //num
"Juan", //name
false, //like
false, //catched
),]
UPDATE:
here is a example list of my code:
Widget listView() {
int columnCount = 3;
final deviceWidth = MediaQuery.of(context).size.width;
return AnimationLimiter(
child: ListView.builder(
controller: myScrollController,
padding: EdgeInsets.only(
top: 10.0,
),
itemCount: definiti.length,
key: PageStorageKey<String>(
'listsave'),
itemBuilder: (context, index) {
final dlists = definiti[index];
return GestureDetector(
onTap: () {
dlists.like = !like; //I want to retrieve this
dlists.catched = !catched; //I want to retrieve this
},
child: Padding(
padding: EdgeInsets.only(
bottom: 25.0,
right: 20.0,
left: 20.0,
),
child:
Stack(alignment: Alignment.centerLeft, children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
// ignore: prefer_const_literals_to_create_immutables
boxShadow: [
shadows.BoxShadow(
blurRadius: 10,
offset: Offset(10, 10),
spreadRadius: 1,
color: Constant.isDarkMode
? Constant.greShadowDark
: Constant.greShadowLight,
)
],
color: Constant.isDarkMode
? Constant.darktMode
: Constant.lightMode,
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 20.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(
width: deviceWidth * 0.34,
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment
.center, //Center Column contents vertically,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment
.center, //Center Row contents horizontally,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text(
dlists.name, //NOOOOOOMBRE
style: TextStyle(
fontSize: 22.0,
color: Constant.isDarkMode
? Colors.grey
: Colors.black,
fontWeight: FontWeight.bold,
),
),
],
),
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment
.center, //Center Row contents horizontally,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
ZoomIn(
child: InkWell(
onTap: () {},
child: Container(
//margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
boxShadow: [
shadows.BoxShadow(
blurRadius: 7,
offset: Offset(-7, -7),
color: Constant
.isDarkMode
? Constant
.whiteShadowDark
: Constant
.whiteShadowLight,
inset: true,
spreadRadius: 1),
shadows.BoxShadow(
blurRadius: 7,
offset: Offset(7, 7),
spreadRadius: 1,
color: Constant.isDarkMode
? Constant
.greShadowDark
: Constant
.greShadowLight,
)
],
// ignore: prefer_const_literals_to_create_immutables
shape: BoxShape.rectangle,
borderRadius:
BorderRadius.only(
topLeft:
Radius.circular(
15.0),
topRight:
Radius.circular(
15.0),
bottomRight:
Radius.circular(
15.0),
bottomLeft:
Radius.circular(
15.0))),
width: MediaQuery.of(context)
.size
.width *
0.20,
height: MediaQuery.of(context)
.size
.width *
0.080,
// ignore: prefer_const_constructors
child: Center(
child: Text(
dlists.type1,
style: GoogleFonts.rubik(
fontSize: 15,
color: Colors.white,
),
),
),
),
),
),
]),
]),
),
],
),
),
),
]),
),
);
}),
);
}

How can I use carousel with hero in flutter?

I am trying to make a animation show bookmark. Just like the example on this website.The orignial example is too complicated. So I put part of code from the example of flutter doc. To learn the easiest animation. I have put same tag in both hero,but still error.
Please help me out.Thanks!
Sorry my english is poor.
Center(
child: FutureBuilder(
future: fetchData('querySdiList'),
builder: (context, qS) {
if (qS.hasData) {
return CarouselSlider.builder(
itemCount: qS.data.length,
itemBuilder: (BuildContext context, int itemIndex, int i) {
final list = qS.data[itemIndex];
sdiId = list['sdiId'];
print('carousel:' + sdiId.toString());
return Center(
child: SizedBox(
width: 300,
child: Hero(
tag: sdiId.toString(),
child: Material(
child: InkWell(
onTap: () {
// Navigator.pushNamed(context, '/BookMarkPage');
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
print('Hero:' + sdiId.toString());
return Container(
// Set background to blue to emphasize that it's a new route.
color: Colors.lightBlueAccent,
padding: const EdgeInsets.all(16.0),
alignment: Alignment.topLeft,
child: SizedBox(
width: 100,
child: Hero(
tag: sdiId.toString(),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Image.network(
_image[0],
fit: BoxFit.contain,
),
),
),
),
));
}));
},
child: Container(
height:
MediaQuery.of(context).size.height / 2,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 10,
)
],
),
margin: EdgeInsets.all(5.0),
child: Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(15)),
child: Container(
height: MediaQuery.of(context)
.size
.height /
2,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(_image[
Random().nextInt(
_image.length)])),
),
),
),
Container(
height: MediaQuery.of(context)
.size
.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(15)),
color: Colors.white,
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomLeft,
colors: [
Colors.transparent,
Colors.black,
],
stops: [0.0, .85],
),
),
),
Container(
padding: EdgeInsets.all(10),
child: RichText(
text: TextSpan(
text: '${list['sdiName']}',
style: TextStyle(
fontSize: 50,
color: Colors.white),
),
),
height: MediaQuery.of(context)
.size
.height /
8,
),
],
),
),
),
))));
},
options: CarouselOptions(
aspectRatio: 2,
autoPlay: true,
enlargeCenterPage: true,
height: MediaQuery.of(context).size.height,
),
);
} else if (qS.hasError) {
return qS.error;
}
return CircularProgressIndicator();
},
),
),
error
There are multiple heroes that share the same tag within a subtree.
You are creating multiple widgets with the carouselBuilder and each one of them is getting the same tag, you cant do that, the tag is what tells the Hero widget where it should animate to.
The problem seem to be here
final list = qS.data[itemIndex];
sdiId = list['sdiId'];
try setting the hero tag as something like this
tag: qS.data[itemIndex]['sdiId']
this should give each of the heros the sdiId of the itemIndex preventing them from having the same one

Transparent card but with shadow effect from elevation

I'm having trouble making a card that has a transparent white color (opacity 0.4). But, with shadow from the elevation effect.
If I remove the elevation, there's no shadow effect and the card look transparent. But, if I add some elevation, the transparent effect ruined. Here's what I've tried:
Widget cardMenu(String title) {
return Container(
padding: EdgeInsets.symmetric(horizontal: UIComponent.componentPadding),
child: Stack(
alignment: Alignment.topCenter,
children: [
Positioned(
top: -100,
child: Container(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Center(
child: Text(
title,
style: TextStyle(color: Colors.transparent),
),
),
),
)
),
Align(
alignment: Alignment.bottomCenter,
child: Card(
elevation: 0,
color: Colors.white.withOpacity(0.4),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(UIComponent.cardButtonRadius),
),
),
child: Container(
height: 350,
width: 180,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.all(UIComponent.widgetPadding),
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: UIComponent.h1,
color: UIComponent.neutralDark,
),
),
)
],
),
),
),
)
],
),
);
}
The output of my code:
What I'm expecting to be:
Hii Christophorus Anindityo N
Make a class for BoxShadow property of container.
class CustomBoxShadow extends BoxShadow {
final BlurStyle blurStyle;
const CustomBoxShadow({
Color color = const Color(0xFF000000),
Offset offset = Offset.zero,
double blurRadius = 0.0,
this.blurStyle = BlurStyle.normal,
}) : super(color: color, offset: offset, blurRadius: blurRadius);
#override
Paint toPaint() {
final Paint result = Paint()
..color = color
..maskFilter = MaskFilter.blur(this.blurStyle, blurSigma);
assert(() {
if (debugDisableShadows)
result.maskFilter = null;
return true;
}());
return result;
}
}
And use this class in a Container
Container(
child: Center(
child: Container(
height: 200.0,
width: 300.0
decoration: BoxDecoration(
boxShadow: [
CustomBoxShadow(
color: Colors.black,
offset: Offset(5.0, 5.0),
blurRadius: 5.0,
blurStyle: BlurStyle.outer
)
],
),
child: Text("Transparent Card with Shadow", style:TextStyle(fontSize:15))),
)
)
Now you are good to code :)

Images not loading correctly on Carousel Slider in Flutter

I do not know what is wrong with this image loading inside the slider , also I thought this has something to do with the debug but the release version has the same problem, overall all the pictures load slowly and have some delay but this problem is worse.
Container(
margin: EdgeInsets.only(top: Platform.isAndroid ? 85.0 : 115.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CarouselSlider(
aspectRatio: 1.1,
viewportFraction: 0.6,
initialPage: 0,
enlargeCenterPage: true,
reverse: false,
autoPlay: false,
enableInfiniteScroll: false,
scrollDirection: Axis.horizontal,
onPageChanged: (index) {
if (!mounted) return;
setState(() {
_current = index;
SystemChrome.setEnabledSystemUIOverlays(
[SystemUiOverlay.bottom]);
});
},
items: [
slides("words", "assets/images/Academic_Words.jpg", "Academic\n Words", MyAppWords()),
slides("writing", "assets/images/writing.jpg", "Academic\n Writing", MyAppWriting()),
slides("conference", "assets/images/conference.jpg", "Academic\nConference", EnterPhone()),
slides("conversation", "assets/images/conversations.jpg", "Academic\nConversations", null),
slides("correspondence", "assets/images/correspondence.jpg", "Academic\nCorrespondence", MyAppCorrespondence()),
].map((imgUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
alignment: Alignment.center,
margin: EdgeInsets.symmetric(
vertical: 20.0, horizontal: 9.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(48.0),
boxShadow: [
BoxShadow(
color:
Color.fromRGBO(50, 50, 50, 1),
blurRadius: 5.0,
// has the effect of softening the shadow
spreadRadius: 5.0,
// has the effect of extending the shadow
offset: Offset(
-1.0,
// horizontal, move right 10
8.0, //
// vertical, move down 10
),
)
]),
child: ClipRRect(
borderRadius: BorderRadius.circular(48.0),
child: imgUrl,
));
},
);
}).toList()),
]),
decoration: BoxDecoration(
borderRadius:
BorderRadius.vertical(top: Radius.circular(48.0)),
color: Color.fromRGBO(237, 237, 237, 1),
),
),
]);
},
));
}
slides(String _tag,String _asset, String _title, Widget myF ){
return GestureDetector(
child: Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Hero(
tag: _tag,
child: Image.asset(
_asset,
fit: BoxFit.cover,
),
),
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.black45,
Colors.black54
],
begin: Alignment.topLeft,
end: Alignment.bottomRight
),
),
),
Container(
alignment: Alignment.center,
child: Text(
_title,
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.w400,
fontFamily: "Raleway"),
),
)
],
),
onTap: () => Navigator.push(context,
MaterialPageRoute(
builder: (BuildContext context) {
return myF;
})),
);
}
here is a demonstration of my problem=> http://uupload.ir/view/k2ub_video_2019-10-22_10-14-47.mp4/
The behavior seems to be caused by the scaling of the large image. Since carousel_slider: 2.0.0, it's recommended to pass CarouselOptions to options - wherein you can define either the height or aspect ratio for the carousel items.

Making Responsive screen with flutter

My Home Page screen is not responsive at different size of the screens.
It got overlapped on other widgets.
I used MediaQuery.
How to resove this issue?
IOS Device
Android device
Code:
Size get size => Size(MediaQuery.of(context).size.width * 0.8,
MediaQuery.of(context).size.width * 0.8);
double _rotote(int index) => (index / widget.items.length) * 2 * pi;
build method:
Center(
child: Container(
// alignment: Alignment.center,
height: size.height/1.1,
width: size.width/1.1,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [BoxShadow(blurRadius: 20, color: Colors.black38)],
//border: Border.all(color: Colors.black)
),
child: Transform.rotate(
angle: -(widget.current + widget.angle) * 2 * pi,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
for (var luck in widget.items) ...[_buildCard(luck)],
for (var luck in widget.items) ...[_buildImage(luck)],
],
),
),
),
);
WHEEL CARD:
_buildCard(Luck luck) {
var _rotate = _rotote(widget.items.indexOf(luck));
var _angle = 2 * pi / widget.items.length;
return Transform.rotate(
angle: _rotate,
child: ClipPath(
clipper: _LuckPath(_angle),
child: Container(
height:size.height/1.1,
width: size.width/1.1,
decoration: BoxDecoration(
// border: Border.all(color: Colors.black),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [luck.color, luck.color])),
),
),
);
}
IMAGE ON WHEEL
_buildImage(Luck luck) {
var _rotate = _rotote(widget.items.indexOf(luck));
return Transform.rotate(
angle: _rotate,
child: Container(
height: size.height,
width: size.width,
alignment: Alignment.topCenter,
child: ConstrainedBox(
constraints:
BoxConstraints.expand(height: size.height / 3, width: 44),
child: Image.asset(luck.asset),//Image.asset("asset/image/wheel.png")
),
),
);
}
}
These above methods are defined in a StatefulWidget class BoardView.dart
HomePage.dart
Center(
child: Column(
children: <Widget>[
ArrowView(),// for upper arrow
Stack(
alignment: Alignment.center,
children: <Widget>[
BoardView(items: _items, current: _current, angle: _angle),
_buildSpin(),
],
),
_buildResult(_value),
],
),
);
_buildSpin
_buildSpin() {
return Material(
color: Colors.white,
shape: CircleBorder(),
child: InkWell(
customBorder: CircleBorder(),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
color: Colors.blue,
borderRadius: BorderRadius.circular(80)
),
height: 70,
width: 70,
child: Text(
"SPIN",
style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold, color: Colors.white),
),
),
onTap: (){},
),
);
}
I think you can have a look at this package. I have used it on one of my projects and it really makes life easy when dealing with different screens from mobile to tablets.
you can use FractionallySizedBox with widthFactor or heightFactor, see: https://www.youtube.com/watch?v=PEsY654EGZ0
and for orientation you can wrap your widget with OrientationBuilder: https://flutter.dev/docs/cookbook/design/orientation