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.
Related
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
I have an app with lots of Lottie animations. They work fine in a Windows UWP app and AirBnB sample Android app. Also look fine in lottiefiles.com online test tool.
But they are glitchy in Flutter using Lottie for Flutter package. Not all of them, but many, maybe around a third.
Full source code below, you can try for yourself.
Glitches are either frame overlaps or blinking, as if there is a gap between frames.
Glitches are consistent, i.e. always happen in the same place, so does not seem like a performance issue.
Also, they are not happening between repeats, but in the middle of the animation, so again not an application issue but seems to be the issue with how they are rendered.
I have tried loading them as composition from memory with a controller. I have also tried a vanilla asset load to rule out issues with my implementation, and they are behaving the same. The issue appears both in the emulator and the actual phone. So it seems to me it is not caused by the way I implemented but by the Lottie package itself, or perhaps an issue with Lottie JSON that for some reason only affects Android.
Full example is below. Just paste this into main.dart and add dependency to yaml: lottie: ^1.2.1.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.dark,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Lottie Test"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Lottie.network(
'https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json'),
),
],
),
),
);
}
}
Try adding frameRate: FrameRate.max like stated below.
Expanded(
child: Lottie.network('https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json',
frameRate: FrameRate.max,
),
),
this will render the Lottie animation with the same frame rate of that of the app. In Lottie plugin it will render the json as per the frame rate mentioned in the json file. An animation encoded with a 25 FPS will only be painted 25 times per seconds even though the AnimationController will invalidate the widget 60 times per seconds. Hence this framerate was introduced from Lottie 0.6.0
I use Lottie for Flutter on my applications and it works well also on emulator or on low-performance phones. The problem can be related to bad converted animations, or you can try to use Lottie.asset(yourjson) to avoid potential network fetch issues.
According to the official package documentation
For Flutter Web, run the app with: flutter run --web-renderer canvaskit
Works fine for me in the latest version: lottie: ^1.2.1
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
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
I'm working with Cupertino widgets, and need to locally override my global CupertinoTheme, and use CupertinoTheme widget for this purpose. My use case is to force some 'dark' theme when displaying text on top of images, but the issue is general.
In the following sample, I try to change the font size for one text style (from 42px to 21px), but it is not applied: the two texts have the same size (second should be 21px high).
It seems that CupertinoTheme.of(context) does not read the overriden style, contrary to the documentation
Descendant widgets can retrieve the current CupertinoThemeData by calling CupertinoTheme.of
Here is a sample (that can be tested on DartPad):
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoApp(
debugShowCheckedModeBanner: true,
theme: CupertinoThemeData(
brightness: Brightness.dark,
textTheme: CupertinoTextThemeData(
navLargeTitleTextStyle: TextStyle(fontSize: 42)
)
),
home: Home()
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Column(
children: [
Text(
'Hello, World #1!',
style: CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle
),
CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
navLargeTitleTextStyle: TextStyle(fontSize: 21)
)
),
child: Text(
'Hello, World #2!',
style:
CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle
),
),
]
)
);
}
}
You’re getting the theme from the wrong context. The context must be a descendant of the CupertinoTheme widget (or rather the element that will be created from it). Try:
CupertinoTheme(
data: ...,
child: Builder(
builder: (context) => ... CupertinoTheme.of(contex)...
)
)
With the content parameter of the build method you can access anything done by ancestors of the build-method’s widget. Whatever you do in the build method has no effect on it.
Widgets are recipes for creating a tree of Elements. The context parameter that you get in build(er) method is (a reduced interface of) the element created for that widget. The Foo.of(context) methods typically search through the ancestor elements of context to find a Foo. (In some cases there is caching, so it isn’t a slow search.) When you create a tree of widgets in a build method, you’re just creating widgets; the elements will be created after that build method competes. Using a Builder widget, like I did above, delays creation of the widgets in Builder’s builder parameter until after an elements have been created for the Builder (and the widgets above it). So that is a way to get around your problem. Another way would be to create a new StatelessWidget with the widgets that are children of CupertinoTheme in your code, because it will similarly delay the creation of those widgets until after the element for that stateless widget (and its parents) is created.