I have 5 widgets with different sizes which would overflow if placed next to each other.
I am looking for a layout helper class that limits the widgets to the horizontal space and auto-wraps the widgets instead to a new line. First I was looking for a grid view but prefer instead a view which is independent since all elements have different widths. A multi line text field does actually already that, I just need the same approach with my widgets. Any ideas?
<Widget>[
new RaisedButton(child: const Text('Foo')),
new RaisedButton(child: const Text('Foo Bar')),
new RaisedButton(child: const Text('Foo Bar Bas')),
new RaisedButton(child: const Text('F')),
new RaisedButton(child: const Text('B'))
]
The Wrap widget is what you need:
return Wrap(
children: <Widget>[
new RaisedButton(child: const Text('Foo')),
new RaisedButton(child: const Text('Foo Bar')),
new RaisedButton(child: const Text('Foo Bar Bas')),
new RaisedButton(child: const Text('F')),
new RaisedButton(child: const Text('B'))
],
);
Also you can add the properties runSpacing and spacing to your Wrap widget to give more space between your items in horizontal and vertical.
Wrap(
runSpacing: 5.0,
spacing: 5.0,
you can do it by using the Wrap widget it will shift automatically your child widgets to the next line.
Related
I'm new here and with Flutter, at this moment i'm developing an app to list data from my node api. I have found the way to filter that data and then show it in a flutter Datatable. Now, i want to give format to my "Cantidad" column. I though creating like a dropdown button and put it in the title of my Cantidad column. Then I will select the format between "Bandejas" or "Plantas" , these will change the value of all the cells in this columns. Do you have any idea to achieve this?
My app screnshoot
I drawed it to make more sense to you, if you take a look in my cantidad title there is a red arrow, i want to design a dropdown there. It's only a simbolyc draw.
Since label in DataColumn can be any widget, you can just use a DropdownButton there, here's a code sample i just did.
return DataTable(
border: TableBorder.all(width: 1),
columns: [
const DataColumn(
label: Text('Fecha'),
),
const DataColumn(
label: Text('Especie'),
),
DataColumn(
label: DropdownButton(
hint: const Text(
'Cantidad',
style: TextStyle(color: Colors.black),
),
underline: Container(),
items: const [
DropdownMenuItem(
value: 'Bandejas',
child: Text('Bandejas'),
),
DropdownMenuItem(
value: 'Plantas',
child: Text('Plantas'),
),
],
onChanged: (value) {
//Here update your column values
},
),
),
],
rows: const [],
);
Here's how it looks:
I am working with #react-navigation/native 6 and using the headerLargeTitle option.
Depending on the screen size the padding of the title is changing. I could not find solution to adjust this through the documented APIs.
Any idea?
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const PortfolioStack = createNativeStackNavigator();
const PortfolioStackScreens = (): JSX.Element => {
return (
<PortfolioStack.Navigator>
<PortfolioStack.Screen
name="Portfolio"
component={PortfolioScreen}
options={{
headerLargeTitle: true,
headerShadowVisible: false,
headerLargeTitleShadowVisible: false,
}}
/>
</PortfolioStack.Navigator>
);
};
Thank you
Whether to enable header with large title which collapses to regular header on scroll.
For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ScrollView or FlatList. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify contentInsetAdjustmentBehavior="automatic" in your ScrollView, FlatList etc.
Only supported on iOS.
Detail
I am working on my first Flutter App and I have encountered two problems.
- The Container widget housing my Image widget does not get displayed on the Stack widget.
There is no Ink effect when tapping the InkResponse container
I have tried rewriting the Container to display the image and by using Image.Network for the url instead of assets but to no avail.
final appLogo = new Container(
child: new Image(
image: new AssetImage('assets/discord.png')
),
);
List<Widget> _getApps(List apps) {
List<Widget> _appWidgets = <Widget>[];
// make a Grid tile of the Apps
for (int i = 0; i < apps.length; i++) {
_appWidgets.add(
new InkResponse(
child: Center(
child: new Stack(
children: <Widget>[
appLogo,
new Container(height: 102, width: 102, color: Colors.red),
],
)
)
),
);
}
return _appWidgets;
}
appLogo should be displayed on the red box (Container) from my expectation and there should be a Splash when I tap on the InkResponse widget.
First of all, your image needs to be added to your pubspec.yaml file like so:
flutter:
assets:
- images/
Once you have that, you can access all your images inside "/images" or any folder name inside your project you want. Now you can access your image in this way:
Image.asset("images/myimage.jpg") // again, this in an example
Bear in mind that images are not affected by the ripple material effect, only the background of it (if the image is inside a bigger container with "empty" space). Second, you need an InkWell with onTap: method in order to show the ripple, to finish everything, you need a Material widget as this one provides the necessary effects.
So, if you want to see a the ripple effect behind the image and having it inside a Stack, you'll need to do something like:
Material(
child: Stack(
children: <Widget>[
InkWell(
onTap: () {}, // The ripple only shows up if you have a onTap method.
child: Container(
height: 300, // 300 is a random value but has bigger height than the image itself.
child: Image.asset("images/myimage.jpg"),
),
),
],
),
)
I have built a native Android App which has a transparent navigation drawer. I have been asked to build the same app using Flutter and I have gotten to the point where I would like to implement a transparent navigation drawer. How do I make the Navigation Drawer of my Flutter app transparent because I have been struggling on that end ? I have already tried
drawer: Drawer(
child: Container(
color: Colors.transparent,)),
The navigation drawer just remains white. I have been searching for a solution to this and cant find one. Any help would be appreciated.
I have attached images of the Native App with a transparent drawer and the Flutter version with a white Navigation drawer
I think there's a better way of doing this without messing up the entire canvases on the app. Since you want it specifically for the drawer, try this approach.
Scaffold(
drawer: Theme(
data: Theme.of(context).copyWith(
// Set the transparency here
canvasColor: Colors.transparent, //or any other color you want. e.g Colors.blue.withOpacity(0.5)
),
child: Drawer(
// All other codes goes here.
)
)
);
use the transparent color like you are currently doing but also in the drawer widget use a stack and inside it make the first widget a backdropfilter, you will need to import dart:ui. here is an example
//import this library to use the gaussian blur background
import 'dart:ui';
Scaffold(
appBar: AppBar(
title: Text('Title'),
),
drawer: Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: sideNav()),
body: Text('Hello Body'),
),
Drawer sideNav(){
return Drawer(
child: Stack(
children: <Widget> [
//first child be the blur background
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), //this is dependent on the import statment above
child: Container(
decoration: BoxDecoration(color: Color.grey.withOpacity(0.5))
)
),
ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Hello Drawer Title')
),
ListTitle(
leading: Icon(Icons.dashboard, color: Colors.white)
title: "Dashboard"
onTap: (){
}
)
]
)
]
)
);
}
After much tinkering around I managed to find a solution.
I edited the ThemeData and added a canvas color as described below
theme: new ThemeData(
canvasColor: Colors.transparent
),
This isn't the best way to do this, it is more of a workaround than anything.
Visual Representation
Screenshot Of drawer top whitespace
If you came here and finding the solution about how to remove the white space above the drawer and status bar then just simply use SingleChildScrollView ---> Column().
Because if you add something like ListView() then the white Space will take place above your drawer which is so irritating to see.
I know this is not the actual solution of this problem but it will help someone who needs it.
Just wrap the drawer with opacity and give the opacity a value (between 0 and 1)
Opacity(
opacity: 0.7,
child: Drawer(//your drawer here),
),
i'm using OL3 and javascript to draw several polygon on a map. Each polygon came from a database in WKT format like "POLIGON((39 -9, ....))". I can draw them on the map but i want to change fill color of each one, but don't know how to do it.
Here is my code:
//WKTpoly -> this is my array of POLYLINES
var format = new ol.format.WKT();
var vectorArea = new ol.source.Vector({});
for (var i=0;i<WKTpoly.length;i++) {
var featureGeom = format.readFeature(WKTpoly[i]);
featureGeom.getGeometry().transform('EPSG:4326', 'EPSG:3857');
vectorArea.addFeature(featureGeom);
}
VectorMap = new ol.layer.Vector({
name: map,
source: vectorArea,
});
map.addLayer(VectorMap);
Well, after LessThanJake response and some more google search, i found the solution, i had to create a style and call setStyle() before addFeature():
(...)
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: FillColor,
weight: 1
}),
stroke: new ol.style.Stroke({
color: LineColor,
width: 1
})
});
featureGeom.setStyle(style);
(...)
Thanks LessThanJake for pointing the right direction.
Or you can setup the layer to use a function as style
the function signature is
var makeStyle = function(feature,resolution) {
return [styles];
};
You can use this to manage style by feature and resolution (zoom level).
As the function is called at each feature render, you'll need to cache the style in a js object to gain performance.