hello I tried to make a geofencing responsive, I have a stack of google map url and a circle. this code is OK :
new Card(
elevation: 2.0,
child: new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
new Container(
child: new Image.network(staticMapUri.toString()),
),
new Container(
alignment: new FractionalOffset(0.0, 0.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.lightBlue.withOpacity(0.5),
),
child:
new AspectRatio(
aspectRatio: MediaQuery.of(context).size.longestSide/GPS2,
child :
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: new Container(
),
),
),
),
new Container(
//padding: const EdgeInsets.only(bottom:10.0),
margin: new EdgeInsets.all(140.0),
child : Icon(Icons.location_on, color: Colors.white, size: 25.0),
),
],
),
),
But I search to replace GPS2 to be dynamics with slider value so here is the code :
new Slider(
value: valperimetre,
onChanged: (double e) => change(e),
activeColor: Colors.lightBlue,
inactiveColor :Colors.grey,
divisions: 10,
label: "$valperimetre""m",
max : 500.0,
min: 0.0,
),
new Card(
elevation: 2.0,
child: new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
new Container(
child: new Image.network(staticMapUri.toString()),
),
new Container(
alignment: new FractionalOffset(0.0, 0.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.lightBlue.withOpacity(0.5),
),
child:
new AspectRatio(
aspectRatio: MediaQuery.of(context).size.longestSide/valperimetre,
child :
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: new Container(
),
),
),
),
new Container(
//padding: const EdgeInsets.only(bottom:10.0),
margin: new EdgeInsets.all(140.0),
child : Icon(Icons.location_on, color: Colors.white, size: 25.0),
),
],
),
),
but currently I have this error :" if I rebuild the app normaly : failed assertion:line 399 pos 15:'aspectRatio.isFinite': is not true."
If I replace valperimetre by 100.0, after rebuild app, and after I replace 100.0 by valperimetre and I hotreload it's OK.
Try Putting this condition check inside your code.
//your code here
child:(valperimetre == 0.0 || valperimetre == null) ?
Container()
:new AspectRatio(
aspectRatio: MediaQuery.of(context).size.longestSide/valperimetre,
//your code here
Related
I would like to make the inkwell image button to be disabled. I can disable onTap event, but can't make gray like disabled button. I tried with adding this code
decoration: new BoxDecoration(color:Colors.grey.withOpacity(0.6)),
But it doesn't work as I want.
My code:
child: Container(
decoration:
new BoxDecoration(color: Colors.grey.withOpacity(0.6)),
child: Material(
//elevation: 4.0,
clipBehavior: Clip.none,
color: Colors.black,
child: Stack(
alignment: Alignment.center,
fit: StackFit.passthrough,
children: [
Ink.image(
image: AssetImage(ihaveheard_imagepath),
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width / 4 * 3,
height: MediaQuery.of(context).size.width / 6,
child: InkWell(onTap: () {}),
),
Align(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.all(8.0),
child: InkWell(
child: Text(
LocaleKeys.ihaveheard,
style: TextStyle(
fontSize:
MediaQuery.of(context).size.width / 30,
color: Colors.white),
).tr(),
onTap: () {
ihaveheard_imagepath =
"assets/images/greenbutton.png";
setState(() {});
},
),
),
)
],
),
),
),
child:
IgnorePointer(
ignoring: disableBtn, //true or false
child: Container(
foregroundDecoration: disableBtn
? BoxDecoration( //this can make disabled effect
color: Colors.grey,
backgroundBlendMode: BlendMode.lighten)
: null,
child: ...
You can use IgnorePointer as parent widget to prevent tab event.
IgnorePointer(
ignoring: disableBtn, //true, false
child: yourWidget()
You can pass null to decoration to show default based on tappable state
Container(
decoration: disableBtn? BoxDecoration(...): null,
.....
)
I have a flutter app. One of my screens is loading lots of images from assets. Sometimes my app is freezing while the images are loading.
Here is my solution: I will put a loading animation, this animation needs to end up after the images are finished rendering but how do I understand all the images are finished rendering?
If you have any other solutions you can share with me :)
here is the Widget tree that loads images, in case if you need to know.
final posts = [
Post(
ownerName: "McQueen95",
avatarPath: "images/mcqueen.jpg",
imagePaths: ['images/mcqueen.jpg'],
),
Post(
ownerName: "BugsBunny",
imagePaths: ['images/Bugs_Bunny.png'],
),
Post(
ownerName: "Venom",
imagePaths: ['images/venom.jpg'],
),
Post(
ownerName: "Po",
imagePaths: ["images/kungfu_panda.jpg"],
avatarPath: "images/po.jpg",
),
Post(
ownerName: "Po",
imagePaths: ["images/kai.jpg", "images/oogway.jpg", "images/crane.png"],
avatarPath: "images/po.jpg",
),
];
#override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: [
SliverAppBar(
title: Text("Cossy", style: TextStyle(color: Colors.purple)),
// elevation: 0,
pinned: true,
// expandedHeight: 150.0,
backgroundColor: backgroundColor,
systemOverlayStyle: SystemUiOverlayStyle(
systemNavigationBarColor: backgroundColor,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Padding(
child: posts[index],
padding: EdgeInsets.only(
bottom: (index == posts.length - 1) ? 82 : 12,
),
),
childCount: posts.length,
),
)
],
);
}
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_image_slider/carousel.dart';
class Post extends StatelessWidget {
Post({
Key? key,
this.avatarPath,
required this.ownerName,
required this.imagePaths,
}) : super(key: key);
final String? avatarPath;
final String ownerName;
final List<String> imagePaths;
#override
Widget build(BuildContext context) {
if (imagePaths.length == 0) return Text("no image?");
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Color(0xFFF2F2F2),
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
// color: Color(0xFFF2F2F2),
color: Colors.deepOrange,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
CircleAvatar(
child: avatarPath == null ? Icon(Icons.person) : null,
backgroundImage:
avatarPath == null ? null : AssetImage(avatarPath ?? ""),
),
SizedBox(width: 10),
Text(ownerName),
Expanded(
child: SizedBox(height: 30),
),
Icon(Icons.settings),
],
),
),
Carousel(
indicatorBarColor: Colors.transparent,
autoScrollDuration: Duration(seconds: 2),
animationPageDuration: Duration(milliseconds: 500),
activateIndicatorColor: Colors.grey.shade200,
animationPageCurve: Curves.bounceInOut,
indicatorBarHeight: 30,
indicatorHeight: 10,
indicatorWidth: 20,
unActivatedIndicatorColor: Colors.grey.shade700,
stopAtEnd: true,
autoScroll: false,
// widgets
items: imagePaths
.map(
(imagePath) => Container(
decoration: BoxDecoration(color: Colors.black),
child: ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 100,
minWidth: 100,
// maxHeight: 500,
maxHeight: MediaQuery.of(context).size.height * 3 / 2,
maxWidth: MediaQuery.of(context).size.width,
),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.center,
child: Image(
image: AssetImage("$imagePath"),
),
),
),
),
)
.toList(),
),
Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
top: 4,
),
child: Row(
children: [
TextButton(
onPressed: () {
print(123);
},
child: Icon(
Icons.star_border_outlined,
size: 30,
// color: Colors.grey,
),
),
Expanded(
child: SizedBox(
height: 30,
),
),
Icon(
Icons.send_outlined,
size: 30,
// color: Colors.grey,
),
],
),
),
],
),
);
}
}
I solved the bug by giving certain height and width values to the Widget that contains images. Using ConstrainedBox and FittedBox means it will load images first and then measure all items' height and widths and then give height value to ListView. So, that's why the app freezes, measuring ListView's size takes a lot of time.
I changed this:
Container(
decoration: BoxDecoration(color: Colors.black),
child: ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 100,
minWidth: 100,
maxHeight: MediaQuery.of(context).size.height * 3 / 2,
maxWidth: MediaQuery.of(context).size.width,
),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.center,
child: Image(
image: AssetImage("$imagePath"),
),
),
),
),
To this:
AspectRatio(
aspectRatio: 1 / 1,
child: Container(
decoration: BoxDecoration(color: Colors.black),
width: MediaQuery.of(context).size.width,
alignment: Alignment.center,
child: ClipRRect(
// borderRadius: BorderRadius.circular(10),
child: Image(
image: AssetImage("${imagePaths[0]}"),
),
),
),
),
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 :)
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
I've been doing some research for an upcoming project and would like to render the camera view behind a custom shape/semi-transparent img to act as a guide when taking pictures.
Does anyone know of a flutter camera plugin or tutorial that explains how to do this?
You can use the camera Plugin for flutter by the Flutter team.
https://pub.dartlang.org/packages/camera
and then position your image and you cameraview in a Stack Widget like this:
return new Stack(
alignment: FractionalOffset.center,
children: <Widget>[
new Positioned.fill(
child: new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: new CameraPreview(controller)),
),
new Positioned.fill(
child: new Opacity(
opacity: 0.3,
child: new Image.network(
'https://picsum.photos/3000/4000',
fit: BoxFit.fill,
),
),
),
],
);
Please visit this repo. This example uses the camera plugin.
new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: Container(
child: Stack(
children: <Widget>[
CameraPreview(controller),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
height: 120.0,
padding: EdgeInsets.all(20.0),
color: Color.fromRGBO(00, 00, 00, 0.7),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
onTap: () {
_captureImage();
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Image.asset(
'assets/images/ic_shutter_1.png',
width: 72.0,
height: 72.0,
),
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
onTap: () {
if (!_toggleCamera) {
onCameraSelected(widget.cameras[1]);
setState(() {
_toggleCamera = true;
});
} else {
onCameraSelected(widget.cameras[0]);
setState(() {
_toggleCamera = false;
});
}
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Image.asset(
'assets/images/ic_switch_camera_3.png',
color: Colors.grey[200],
width: 42.0,
height: 42.0,
),
),
),
),
),
],
),
),
),
],
),
),
);
.
You can also now use this plugin :
CamerAwesome
Official plugin has a ratio bug that makes overlay having bad ratio.
This plugin includes flash, zoom, auto focus... and no initialisation required.
You can check full code on my page
https://github.com/Prashantm111/flutter-camera-inscreen-app