Flutter : create a custom reusable widget image - flutter

I try to create a reusable widget but some error happens...
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class CustomLogo extends StatelessWidget {
#override
Widget showLogo(var nameImage, double radiusImage, double LeftPadding) {
return new Hero(
tag: 'hero',
child: Padding(
padding: EdgeInsets.fromLTRB(LeftPadding, 70.0, 0.0, 0.0),
child: CircleAvatar(
backgroundColor: Colors.transparent,
radius: radiusImage,
child: Image.asset('assets/' + name),
),
),
);
}
}
And I don't understand override and the "construction" of the widget, how I can use var in the widget

You have to create a constructor to get values from where you are trying to call.
In following way you can create separate widget and pass arguments.
Moreover, here one mistake is left and it is hero tag. you are setting constant hero tag, which is fine if you are calling this widget once in a screen. if you are using this widget twice then it will not work because two hero's can’t have same tag in one screen. so, i also suggest you. to assign tag dynamically.
class CustomLogo extends StatelessWidget {
final nameImage;
final radiusImage;
final leftPadding;
CustomLogo({this.leftPadding, this.nameImage, this.radiusImage});
#override
Widget build(BuildContext context) {
return new Hero(
tag: 'hero',
child: Padding(
padding: EdgeInsets.fromLTRB(leftPadding, 70.0, 0.0, 0.0),
child: CircleAvatar(
backgroundColor: Colors.transparent,
radius: radiusImage,
child: Image.asset('assets/' + nameImage),
),
),
);
}
}
How you can call or use this widget.
CustomLogo(leftPadding: 10,radiusImage: 5,nameImage: "hello",)

Related

Too many postival arguments when adding hero transition, image, and text

import 'package:flutter/material.dart';
class DetailsScreen extends StatefulWidget {
final int index;
const DetailsScreen({Key? key, required this.index}) : super(key: key);
#override
State<DetailsScreen> createState() => _DetailsScreenState();
}
class _DetailsScreenState extends State<DetailsScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Hero(
tag: widget.index,
child: Image.network(
"https://raw.githubusercontent.com/markknguyen/pictures/master/pic/${widget.index + 1}.png",
),
const Text("Rome"),
),
),
);
}
}
I tried adding const thinking it will resolve the issue but I didn't. The code did not run. I Just wanted to add some sort of text box in a page. const Text("Rome"), is the main concern.
You can't just have your Text widget there with no parent. You need to put your Hero and Text widget in a Column like so:
Center(
child: Column(
children: [
Hero(
tag: widget.index,
child: Image.network(
"https://raw.githubusercontent.com/markknguyen/pictures/master/pic/${widget.index + 1}.png",
),
),
Text("Rome"),
],
),
),
or any other Widget that acceptes multiple children such as Row or ListView based on your needs
The issue is that your Text() widget isn't passed as a parameter. Currently, the code can't compile due to treating your Text("Rome") as a 'mistake', sort of speaking.
Depending on your use-case scenario, you can either use:
a Column() - if you want your widgets to be one after another in a column.
a Stack() - if you want your widgets to be placed one under another.
You'll have to pass the children attribute to both, so for example:
Column(
children: [
Image.network(
"https://raw.githubusercontent.com/markknguyen/pictures/master/pic/${widget.index + 1}.png",
),
const Text("Rome"),
]
)

Setting a Window Drag Point in Flutter

My Flutter application makes use of the relatively new Windows build tools and the community fluent_ui package.
In an attempt to make my application look more native, I have opted to remove the default Windows title bar using the window_manager package and implement my own. However, this introduces the issue of not being able to move the window by dragging the top of it.
Is there a way to make a widget a window drag point to allow for this?
I recently found a solution by making DraggableAppBar. I'm also using window_manager package to add window control buttons to appbar.
Solution: use DraggableAppBar instead of AppBar in scaffold.
import 'package:flutter/material.dart';
import 'package:universal_platform/universal_platform.dart';
import 'package:window_manager/window_manager.dart';
class DraggebleAppBar extends StatelessWidget implements PreferredSizeWidget {
final String title;
final Brightness brightness;
final Color backgroundColor;
const DraggebleAppBar({
super.key,
required this.title,
required this.brightness,
required this.backgroundColor,
});
#override
Widget build(BuildContext context) {
return Stack(
children: [
getAppBarTitle(title),
Align(
alignment: AlignmentDirectional.centerEnd,
child: SizedBox(
height: kToolbarHeight,
width: 200,
child: WindowCaption(
backgroundColor: backgroundColor,
brightness: brightness,
),
),
)
],
);
}
Widget getAppBarTitle(String title) {
if (UniversalPlatform.isWeb) {
return Align(
alignment: AlignmentDirectional.center,
child: Text(title),
);
} else {
return DragToMoveArea(
child: SizedBox(
height: kToolbarHeight,
child: Align(
alignment: AlignmentDirectional.center,
child: Text(title),
),
),
);
}
}
#override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

Using BackdropFilter affects other widgets in a Row Widget - Flutter Web

I am having an issue when trying to blur a container in a Row widget when the user hovers over it (on Chrome). I have a custom widget called PanelLink, which is supposed to shrink in size and blur the background when the cursor goes over it. It works, but for some reason when hovering over one it also blurs every widget to the left not just itself.
FrontPage.dart:
import 'package:flutter/material.dart';
import 'package:website_v2/CustomWidgets/PanelLink.dart';
class FrontPage extends StatefulWidget {
FrontPage();
#override
_FrontPageState createState() => _FrontPageState();
}
class _FrontPageState extends State<FrontPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Website'),
centerTitle: false,
backgroundColor: Colors.blue[900],
),
backgroundColor: Colors.blueGrey[900],
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
PanelLink(false, 'assets/education.jpg'),
PanelLink(true, 'assets/about.jpeg'),
PanelLink(false, 'assets/projects2.jpg'),
],
),
),
);
}
}
PanelLink.dart:
import 'package:flutter/material.dart';
import 'dart:ui';
class PanelLink extends StatefulWidget {
PanelLink(this._blur, this.imageLoc);
final bool _blur;
final String imageLoc;
#override
PanelLinkState createState() => PanelLinkState(_blur, imageLoc);
}
class PanelLinkState extends State<PanelLink> {
PanelLinkState(this._blur, this.imageLoc);
bool isHovering = false;
bool _blur;
String imageLoc;
Widget build(BuildContext context) {
return Expanded(
child: InkWell(
onTap: () => null,
onHover: (hovering) {
setState(() => {isHovering = hovering});
},
child: Stack(children: [
AnimatedContainer(
duration: const Duration(milliseconds: 1000),
curve: Curves.ease,
margin: EdgeInsets.all(isHovering ? 20 : 0),
decoration: BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: AssetImage(imageLoc), fit: BoxFit.cover)),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: isHovering ? 5 : 0, sigmaY: isHovering ? 5 : 0),
child: Container(
color: Colors.black.withOpacity(0.1),
)),
),
Text('Test')
]),
));
}
}
Here is a picture of the issue occurring. I am hovering the mouse over panel 2, but both panel 1 and 2 are blurred but not panel 3. If I hover over panel 1 only panel 1 is blurred. If I hover over panel 3, all of them are blurred.
I experimented by only making panel two have the BackdropFilter Widget, but panel 1 still got blurred when hovering over panel 2.
Since your using AnimatedContainer widget the problem might be it cant identify the difference between his child widget. Try adding a key value identifier
AnimatedContainer(
child: Container(
key: ValueKey("imageA"), //make sure that this is different on every widget, its better to passed some value here thats different on the other refactored widget
Try experimenting it might work for you
),
),

Why is draggable widget not being placed in correct position?

I'm struggling to understand why after moving a draggable widget it gets placed into another position about 100px lower than where I'm placing it... The only thing I can think of is that it's adding the height of the Appbar and status bar ...
I thought I was doing something wrong so I decided to create the simplest example I could and it's still doing the same thing.
Just to confirm, I don't want to use drag targets, or anything like that ... I'd simply like the draggable widget to land exactly where I place the thing. However, I do need it inside of a Stack
[EDIT] It seems that removing the AppBar allows the Draggable to land exactly where you place it. However, I don't want the draggable widget to go behind the Status bar and so after adding a SafeArea I'm left with a similar problem. [/EDIT]
import 'package:flutter/material.dart';
class DraggableTest extends StatefulWidget {
static const routeName = '/draggable-test';
#override
_DraggableTestState createState() => _DraggableTestState();
}
class _DraggableTestState extends State<DraggableTest> {
Offset _dragOffset = Offset(0, 0);
Widget _dragWidget() {
return Positioned(
left: _dragOffset.dx,
top: _dragOffset.dy,
child: Draggable(
child: Container(
height: 120,
width: 90,
color: Colors.black,
),
childWhenDragging: Container(
height: 120,
width: 90,
color: Colors.grey,
),
feedback: Container(
height: 120,
width: 90,
color: Colors.red,
),
onDragEnd: (drag) {
setState(() {
_dragOffset = drag.offset;
});
},
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Stack(
children: <Widget>[
_dragWidget(),
],
),
);
}
}
The main issue has to do with global position vs local position: Your Draggable widget gives global position whereas the Positioned inside your Stack takes local position. When there is no AppBar global and local positions match so the issue disappear but is still here.
So the real fix here is:
Convert your global coordinates to locale ones:
RenderBox renderBox = context.findRenderObject();
onDragEnd(renderBox.globalToLocal(drag.offset));
You now need a context. This context has to be local (the of the Draggable for example). So in the final implementation you can embed either the Stack or the Draggable in a StatelessWidget class in order to get a local context.
Here is my final implementation:
import 'package:flutter/material.dart';
main() {
runApp(MaterialApp(
home: DraggableTest(),
));
}
class DraggableTest extends StatefulWidget {
static const routeName = '/draggable-test';
#override
_DraggableTestState createState() => _DraggableTestState();
}
class _DraggableTestState extends State<DraggableTest> {
Offset _dragOffset = Offset(0, 0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Stack(
children: <Widget>[
Positioned(
left: _dragOffset.dx,
top: _dragOffset.dy,
child: DragWidget(onDragEnd: onDragEnd),
),
],
),
);
}
void onDragEnd(Offset offset) {
setState(() {
_dragOffset += offset;
});
}
}
class DragWidget extends StatelessWidget {
final void Function(Offset) onDragEnd;
const DragWidget({Key key, this.onDragEnd}) : super(key: key);
#override
Widget build(BuildContext context) {
return Draggable(
child: Container(
height: 120,
width: 90,
color: Colors.black,
),
childWhenDragging: Container(
height: 120,
width: 90,
color: Colors.grey,
),
feedback: Container(
height: 120,
width: 90,
color: Colors.red,
),
onDragEnd: (drag) {
RenderBox renderBox = context.findRenderObject();
onDragEnd(renderBox.globalToLocal(drag.offset));
},
);
}
}
Note that the offset returned by renderBox.globalToLocal(drag.offset) is the offset inside the Draggable (from the start position to the end position). It is why we need to compute the final offset by setting _dragOffset += offset.

Resizing parent widget to fit child post 'Transform' in Flutter

I'm using Transforms in Flutter to create a scrolling carousel for selecting from various options.
This uses standard elements such as ListView.builder, which all works fine, aside from the fact that the parent widget of the Transform doesn't scale down to fit the content as seen here:
Here's the code used to generate the 'card' (there was actually a Card in there, but I've stripped it out in an attempt to get everything to scale correctly):
return Align(
child: Transform(
alignment: Alignment.center,
transform: mat,
child: Container(
height: 220,
color: color,
width: MediaQuery.of(context).size.width * 0.7,
child: Text(
offset.toString(),
style: TextStyle(color: Colors.white, fontSize: 12.0),
),
),
),
);
}
Even if I remove the 'height' parameter of the Container (so everything scales to fit the 'Text' widget), the boxes containing the Transform widgets still have the gaps around them.
Flutter doesn't seem to have any documentation to show how to re-scale the parent if the object within is transformed - anyone here knows or has any idea of a workaround?
EDIT: The widget returned from this is used within a build widget in a Stateful widget. The stack is Column > Container > ListView.builder.
If I remove the Transform, the Containers fit together as I'd like - it seems that performing a perspective transform on the Container 'shrinks' it's content (in this case, the color - check the linked screen grab), but doesn't re-scale the Container itself, which is what I'm trying to achieve.
I have a tricky solution for this: addPostFrameCallback + overlay.
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
// ignore: must_be_immutable
class ChildSizeWidget extends HookWidget {
final Widget Function(BuildContext context, Widget child, Size size) builder;
final Widget child;
final GlobalKey _key = GlobalKey();
OverlayEntry _overlay;
ChildSizeWidget({ this.child, this.builder });
#override
Widget build(BuildContext context) {
final size = useState<Size>(null);
useEffect(() {
WidgetsBinding.instance.addPostFrameCallback((timestamp) {
_overlay = OverlayEntry(
builder: (context) => Opacity(
child: SingleChildScrollView(
child: Container(
child: child,
key: _key,
),
),
opacity: 0.0,
),
);
Overlay.of(context).insert(_overlay);
WidgetsBinding.instance.addPostFrameCallback((timestamp) {
size.value = _key.currentContext.size;
_overlay.remove();
});
});
return () => null;
}, [child]);
if (size == null || size.value == null) {
return child;
} else {
return builder(context, child, size.value);
}
}
}
Usage:
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
class HomeView extends HookWidget {
#override
Widget build(BuildContext context) {
final change = useState<bool>(false);
final normal = Container(
color: Colors.blueAccent,
height: 200.0,
width: 200.0,
);
final big = Container(
color: Colors.redAccent,
height: 300.0,
width: 200.0,
);
return Column(
children: [
Container(
alignment: Alignment.center,
child: ChildSizeWidget(
child: change.value ? big : normal,
builder: (context, child, size) => AnimatedContainer(
alignment: Alignment.center,
child: SingleChildScrollView(child: child),
duration: Duration(milliseconds: 250),
height: size.height,
),
),
color: Colors.grey,
),
FlatButton(
child: Text('Toggle child'),
onPressed: () => change.value = !change.value,
color: Colors.green,
),
],
);
}
}
I have a menu with several options, they have different height and with the help of the animations this is ok, it's working really nice for me.
Why are you using Align, as much as I can see in your code, there is no property set or used, to align anything. So try removing Align widget around Transform.
Because according to the documentation, Transform is such a widget that tries to be the same size as their children. So that would satisfy your requirement.
For more info check out this documentation: https://flutter.dev/docs/development/ui/layout/box-constraints
I hope it helps!