I am developing a flutter app where appbar icon broke suddenly without any reason. Try to fix but nothing has been found yet.
enter image description here
AppBar(
actions: [
GestureDetector(
onTap: () {},
child: SvgPicture.asset(
iconSearch,
color: VisuColors.white,
),
),
]
)
According to the image and code that you provide, things that come to my mind are:
1- Try to give width and height to SvgPicture.asset like this:
SvgPicture.asset(
iconSearch,
color: VisuColors.white,
width: 15,
height: 15,
),
2- Check the color that you gave to SvgPicture.asset, maybe it has something related to the color.
3- If these 2 solutions didn't solve your problem, check your SVG file and try to use another SVG file to see if the problem is with the file that you use. Because sometimes, the SVG files may be broken (size, color, formatting etc.).
Related
How to add an image / icon or any object in the middle of a pie chart in fl_chart package for flutter ?
I want to make this: Iwant to have the running man!
you can try stack and use icon on top of pie and use alignment or padding to get icon in middle like :
Stack(
alignment: Alignment.center,
children: [
// icon, svg, image
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.add),
),
your_fl_widget(),
],
)
you can't do this, this is the response from the creator of fl_chart:
Hi. At the moment there is no possibility to support Widgets in the
title. (I hope we can implement it in the future)
As a workaround, you can have an icon font to implement icons instead
of texsts. https://github.com/imaNNeoFighT/fl_chart/issues/880
I used the flutter_colorpicker package to implement a color picker in my app. My widget looks something like this:
ColorPicker(
pickerColor: ...,
paletteType: PaletteType.hueWheel,
onColorChanged: (color) {
...
},
enableAlpha: false,
labelTypes: const [],
)
In the UI it looks like this:
Now I want to remove the brightness bar on the bottom. I know that the color picker is not complete without that brighness bar but I will handle the brightness a different way. I have found no official documentation on how to achieve this.
How do I remove that bar? Hacks are also welcome or somehow extending the package with inheritance.
Here I attach some links which contains no brightnesss bar
Flutter Material Color Picker
Flex Color Picker
I have solved the problem by clipping away that bar using a ClipRect widget:
ClipRect(
child: Align(
alignment: Alignment.topCenter,
heightFactor: 0.75,
child: ColorPicker(
...
colorPickerWidth: 250,
),
),
);
I have not found any unwanted side effects with this approach yet.
Disclaimer:
I am very new to flutter, this is my first solo project that I am creating. All other projects have only been very short tutorials. The problem I am having (described below) may seem like a very easy fix, but as I am new please do explain it in detail as best you can, being able to visualize what you are saying also helps (through code, diagrams etc). Thank you.
Problem:
Unable to get auto_size_text maxLines to work correctly. On top of this, unable to get MaxFontSize working.
Further Explanation
I am using the auto_size_text package, setup with the pubspec.yaml dependency: auto_size_text: ^2.1.0 and import: 'package:auto_size_text/auto_size_text.dart'. I also changed my pubspec.yaml environment from sdk: ">=2.12.0 <3.0.0" to sdk: ">=2.11.0 <3.0.0" to allow non null safe packages to work - as per direction of this tutorial.
I am creating a container inside of my app, inside of this container is a Column widget, inside the Column widget are several rows. One of these rows is intended as a title. The code for it is below:
Row( // Row is inside of a Column which is inside of a Container
children: [
const SizedBox(width: 55), // Used to create padding either side of text
Expanded(
child: FittedBox(
child: AutoSizeText(
'70 | Brighton - Abbotsford and Green Island', // Header Example
maxLines: 2, // Cannot get this to work, always remains one line
maxFontSize: 20, // Does not work, always resizes to max font in order to fill whole FittedBox
style: TextStyle(
fontSize: 20, // Unsure if I need this, adding or removing seems to have to effect.
color: color.AppColor.textMain.withOpacity(0.8),
fontWeight: FontWeight.bold,
),
),
),
),
const SizedBox(width: 55), // Used to create padding either side of text
],
),
With this code I get this result - Note that the blue line is another row above the title but still inside of the same Column widget.
Desired Result:
The font is far too small, so I want it to be split among two lines. I am designing this container to be reused and I will later change it so the text is imported from a CSV file so name lengths will be varied. They all need to be readable, and while it's fine for smaller titles (example), larger ones need to have a bigger font while still fitting inside the same boundaries, so two lines is required. As also mentioned, I am unable to get the maxFontSize working, resulting in shorter titles having too large of a font.
Attempted Solutions:
I have tired using a null safe version of auto_size_text but was unable to get it working (as it's a prerelease I assume it isn't functioning properly).
I have another solution without using auto_size_text package
SizedBox(
child: TextField(
controller: _yourController,
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.all(8),
),
textInputAction: TextInputAction.done,
keyboardType: TextInputType.multiline,
maxLines: null,
),
),
keyboardType: TextInputType.multiline makes TextField can be resized automatically and move to new line if it reach max width, and
maxLines: null makes your text can be written with many lines, and then
decoration here i use to remove TextField box border
Solved
I solved my own problem almost accidently while playing around with the code I posted in the original question.
Solution:
Although not the most convenient, the solution is to replace the Expanded widget and FittedBox to a SizedBox. Below is the adjusted code including comments about changes made.
Row( // Row is inside of a Column which is inside of a Container
children: [
const SizedBox(width: 55), // Used to create padding either side of text
SizedBox( // Changed the Expanded and FittedBox to a sized box with a width of 280, source container has a width of 390, so text is allowed a width of 280 once you subtract the width 55 SizedBox's either side
width: 280,
child: AutoSizeText(
'70 | Brighton - Abbotsford and Green Island', // Header Example
maxLines: 2, // Cannot get this to work, always remains one line
maxFontSize: 20, // Does not work, always resizes to max font in order to fill whole FittedBox
style: TextStyle(
fontSize: 20, // Unsure if I need this, adding or removing seems to have to effect.
color: color.AppColor.textMain.withOpacity(0.8),
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(width: 55), // Used to create padding either side of text
],
),
Thanks
cv template and I want to edit it with flutter
Everything in Flutter is widgets, this image would be an Image widget in your Flutter app.
You can use Stack widget to put things over each other. so You can put image over an image by using Stack widget.
Unfortunately you can't edit text of an image in Flutter, Instead I would rather to edit this image (for putting image and editing text) by Photoshop for example and then implementing it as one piece widget in my Flutter app.
What I assess from your question is you want to have a layout like the one given in your link, right? For a circular image, you could use CircleAvatar. As for the text you could use the Text widget. Now put these widgets inside a Column or Row. You seem to be new to Flutter and I'd suggest you to get a good grip on the basics first. Anyhow, here's a little dummy code snippet you could extend to achieve what you're looking for
Column(
crossAxisAlignment: CrossAxisAlignment
.start, //if you want your widgets to align on left in your col
children: [
CircleAvatar(
radius: 70,
foregroundImage: AssetImage("pathToYourAssetImg"),
),
SizedBox(
height: 20, //set this to your intended value
),
Text( //you could also create a custom text widget and pass the arguments if you don't want to hardcode text widgets over & over again for all of your text
"yourText",
style: TextStyle(
color: Colors.black87,
fontSize: 20, //set this to your value
fontWeight: FontWeight.bold //if you want to have a bold text
),
),
],
);
I have declared a custom icon font in pubspec.yaml (icomoon.ttf).
Flutter's documentation says to invoke an icon, use...
const IconData(
this.codePoint, {
this.fontFamily,
});
I have an element with padding that should contain the icon.
new Padding(
padding: new EdgeInsets.only(top: 2.0),
how to invoke the glyph here? Need to be able to specify font size and
color too.
),
What is an example of how I should invoke "icomoon.ttf" glyph "e901" at size 25px with tint "myColor"?
You need to use that IconData in an Icon widget to display it, something like:
new Icon(const IconData(0x41, fontFamily: 'Roboto'), size: 48.0, color: Colors.red);
So in your case it would be something like:
new Icon(const IconData(0xe901, fontFamily: 'icomoon'), size: 25.0, color: myColor);
I wound up copying the Google icons definitions sheet into a "theme" file for my app ("lib/themes/my_icons.dart") So in this sheet, the icons are defined like so:
class MyIcons {
MyIcons._();
static const IconData superCheckMark = const IconData(0xe900, fontFamily: 'icomoon');
}
In the top of the component where I wanted to use the icon, I included the file. Then the icons were invoked like so:
new Icon(MyIcons.superCheckMark, size: 30.0, color: Colors.white,),
There is also a way to create a color theme file, for example "lib/theme/my_colors.dart". In this file the color "myBlue" is defined. So then this file can also be included at the top of any panel where a custom color palette will be invoked, and it is invoked for the icons like so:
new Icon(MyIcons.superCheckMark, size: 16.0, color: MyColors.colors.myBlue,),
Hope this helps someone else.