Flutter - image drop shadow effect - flutter

I'm working on an app concept and as I was creating a wireframe and photoshop template I was wondering if this effect is recreateable using flutter.
Instead of taking a solid color I'd like to use the colors from the image instead. Does this effect have a certain name?
In this example the left area of the shadow stays beige, while the right side looks pink.

Recently I made drop_shadow_image package on flutter for the drop shadow you can take a look at the implementation below.
also you can find the link to GitHub repo here.
Installation
Add this to your package's pubspec.yaml file:
dependencies:
drop_shadow_image: ^0.9.0
Import the package into your dart file:
import 'package:drop_shadow_image/drop_shadow_image.dart';
Example
import 'dart:ui';
import 'package:drop_shadow_image/drop_shadow_lib.dart';
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body:
Center(
child: DropShadowImage(
offset: Offset(10,10),
scale: 1,
blurRadius: 12,
borderRadius: 20,
image: Image.asset('assets/cat.png',
width: 300,),
),
)
),
);
}
}
Properties of the class
1. Key key
2. double scale // Size to parent.
3. Offset offset // Position of shadow. (dx) for horizontal displacement (dy) for vertical displacement.
4. double blurRadius // Amount of blur in the shadow. 0 means no blur.
5. double borderRadius // border radius of image
6. Image image (#required) // The image.
Screenshot

Related

Flutter GridView sometimes shows padding despite setting it to EdgeInsets.zero

I'm making a very simple Grid, basically 9 squares, and I set the padding to EdgeInsets.zero (or EdgeInsets.all(0)) and sometimes, depending on the window's size, it shows a padding, or not.
I'm testing it on chrome and linux (fedora plasma, and fedora i3wm) and the error is consistent.
The images bellow share the same code, I just resized the window slightly
Image with paddings/gaps
Image without paddings/gaps
Here's the code
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(home: myApp));
}
// display 9 squares
Widget myApp = GridView.count(
crossAxisCount: 3,
padding: EdgeInsets.zero,
children: [
Square(),
Square(),
Square(),
Square(),
Square(),
Square(),
Square(),
Square(),
Square(),
],
);
// simple red colored square
class Square extends StatelessWidget {
Color color = Colors.red;
Square({super.key});
#override
Widget build(BuildContext context){
return Container(
color: color,
padding: EdgeInsets.zero,
);
}
}
flutter is cross-platform framework, which help to build apps with single codebase. But, the challenge is how to make the app adaptive for each platform.
You might read this documentation for full explanation: https://docs.flutter.dev/development/ui/layout/building-adaptive-apps
there many considerations, and you said that its show padding depending window size, which is one of the documentaion mentioned here: https://docs.flutter.dev/development/ui/layout/building-adaptive-apps#building-adaptive-layouts
im not explore yet, but thats my hypothesis. hope it guide you to solve the issue

How to use drawBox, drawEllipse or drawLine methods within the Dart / Flutter pdf library

I want to generate PDF files including self drawn graphics within a Flutter App. Of course with the pdf library provided it is quite simple to show a pdf preview containing for example two text lines, but i want to be able to insert some graphics that i want to draw myself, as i need to draw (myself)some very unconventional graphs. In order to do that i need to be able to draw within a pdf widget (some lines, curves, points, of several colors, etc...). As per now i didn't manage to even draw a point !!!, the pdf library of flutter dart describes dozens of methods, but doesn't show any example, that's a pitty in fact. Is there somebody who could help me in order to "draw" graphics within PDF Dart Flutter Object. The PdfLibrary includes PdfGraphics class that is supposed to have the methods i try tu use without success !!
Many thank's in advance
Please find my code :
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:printing/printing.dart';
void main() => runApp(const MyApp('Ceci est mon premier PDF'));
class MyApp extends StatelessWidget {
const MyApp(this.title);
final String title;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text(title)),
body: PdfPreview(
build: (format) => _generatePdf(format, title),
),
),
);
}
Future<Uint8List> _generatePdf(PdfPageFormat format, String title) async {
final pdf = pw.Document();
pdf.addPage(
pw.Page(
pageFormat: format,
build: (context) {
return pw.Center(
child: pw.Column (
children: [
pw.Text(title),
pw.Text(title),
//pw.drawBox(10,10,100,100), <---- if i remove the comment the app
crashes saying "Method not found"
otherwise i have a PDF generated with two
lines of text, and i want that just under a
self drawn graphic could be displayed
],
),
);//pw.Text(title),
},
),
);
return pdf.save();
}
}
You have to use the CustomPaint class instead of just drawing directly.
Try
pw.CustomPaint(
size: const PdfPoint(110, 110),
painter: (PdfGraphics canvas, PdfPoint size) {
canvas
..setColor(PdfColors.indigo)
..drawRect(10, 10, 100, 100)
..fillPath();
},
);
instead of
pw.drawBox(10,10,100,100)
Check out the list of drawable shapes here: https://pub.dev/documentation/pdf/latest/pdf/PdfGraphics-class.html
For those looking for more information
(pdf's) CustomPaint expects a child and one or two painter functions. Unlike Flutter's CustomPaint
this uses a PdfGraphics instead of a Canvas
the painting functions are functions not CustomPainters
I struggled for days to figure this out and found my answer on this comment: https://github.com/DavBfr/dart_pdf/issues/145#issuecomment-530798498

Flutter clip without space around the clipped widget

I want to clip a widget and use this clipped image in a layout and the bounderies should be the visible part of the imgage when clipped.
Using this custom clipper
#override
Rect getClip(Size size) {
Rect rect = Rect.fromLTRB(25,0,size.width - 25, size.height);
return rect;
}
#override
bool shouldReclip(CustomRect oldClipper) {
return true;
}
}
results in 25 px blank space left of the clipped image and 25 px blank space right of the clipped image.
And at least we ant to copy specific areas of an image and scale/position it exactly in the app... -> more complex desired result:
You need to add a transform to translate the widget over to the newly empty space. Just be aware that the widget itself will still occupy the same width in this example - so if there is some sibling in a row, for example, it will still get "pushed over" by the same amount of space. If you need to change that you'll need to add a SizedBox to the final part of this example so that you can trim down the size of the widget to the portion you've clipped.
Also note that this is not a very good practice - ideally you should be fetching the image you actually want to display. Flutter will still need to load your entire image into memory and then do some non-trivial work to add the clip you want. That takes up plenty of extra CPU and memory. But sometimes you don't have a choice I guess.
This example shows just displaying an image, followed by applying a custom clip, followed by applying a translation, which is what OP is looking for.
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart';
void main() {
final Widget image = Image.network(
'https://via.placeholder.com/300x60?text=This is just a placeholder');
const double widthAmount = 100;
runApp(MaterialApp(
home: Scaffold(
body: Center(
child: Column(
children: <Widget>[
Spacer(),
image,
Spacer(),
ClipRect(
clipper: CustomRect(widthAmount),
child: image,
),
Spacer(),
Transform(
transform: Matrix4.translation(Vector3(-widthAmount, 0.0, 0.0)),
child: ClipRect(
clipper: CustomRect(widthAmount),
child: image,
),
),
Spacer(),
],
),
),
),
));
}
class CustomRect extends CustomClipper<Rect> {
CustomRect(this.widthAmount);
final double widthAmount;
#override
Rect getClip(Size size) {
Rect rect =
Rect.fromLTRB(widthAmount, 0, size.width - widthAmount, size.height);
return rect;
}
#override
bool shouldReclip(CustomRect oldClipper) {
return oldClipper.widthAmount != widthAmount;
}
}
Okay, the solution above is not really working as if we translate the clipped image we get some free space (the amount that we translate).
Isn't there any option in Flutter to just define an area of an widget and get this area as a new Widget/Image with exactly the width and height of the defined area to be able to position it (without any paddings/white space around),to scale it, ...?

Using nearest neighbour interpolation for flutter image

How do I get flutter to resize my Image widgets using nearest neighbour interpolation if the size of the widget is not the same as the asset size?
class PlayContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Color.fromARGB(255, 0, 110, 255),
child: SafeArea(
child: Image(
fit: BoxFit.contain,
image: AssetImage("assets/knight.png")
)
)
);
}
}
This resizes the image correctly, but it is blurry due to the bilinear interpolation used to resize it.
Based on the source seems to be rather hard coded?
This is now possible in the master branch thanks to this Pull request:
I've added the possibility to set the filterQuality on Images. This was hardcoded.
The previously hardcoded value is set as default parameter.
Some images look better when scaled with no filter quality (like pixelart). That's why I added the parameter.

Starting with plain (non material ui) canvas in flutter

All tutorials and documentation I've seen so far start of with importing flutter material. I am wondering is this an absolute requirement? What if I want to start with a plain canvas and build my own theme / widgets. Can I do this, if so what package should be used here so I get access to default widgets?
Although the answers here are correct, I want to add a few more points. To use raw widgets use import 'package:flutter/widgets.dart';
Here is a working example:
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(25.0),
child: Directionality(
textDirection: TextDirection.ltr,
child:Text("hello world",
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1)
),
)));
}
}
The directionality is needed, the padding was added so that we see the message, otherwise it is masked by the menubar in phone.
Widgets in flutter makes the developers day easy. All the widgets are built on top dart:ui lib. It is up to you, to decide to use existing set of widgets or develop your ui from scratch. Flutter does not stop you from writing your own widgets.
You can find a few raw example of here, that does not use any widgets at all.
If you simple don't want only material widgets, then you can just build your own themed widgets with all other basic widgets and layouts available in flutter.
If you wanted to build few of your own widgets with a canvas and use it along with other widgets in flutter, you look into CustomPaint and CustomPainter widgets.
Hope this helped!
Just as Chandan Purohit answered, use import 'package:flutter/widgets.dart';. Flutter official gives a minimal app in Introduction to widgets as follows:
import 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
Just change flutter/material.dart to flutter/widgets.dart, and you get a plain canvas to start.
Note: The color of Text is white by default.