I am a web dev in MS stack trying flutter for a personal project of mine. I want to create a layout like in the below URL in the meeve app with circular images with text below the image button/icon.
https://www.thedroidsonroids.com/blog/apps-made-with-flutter#meeve
I tried the layout given in the example on flutter docs below but it is not what I am looking for and I am not able to re purpose this for my case. https://flutter.dev/docs/cookbook/lists/grid-lists
Any leads in this respect is appreciated.
You can use CircleAvatar in a Column.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(backgroundImage: AssetImage("assets/images/chocolate_pic.png"), radius: 40),
SizedBox(height: 12),
Text("Chocolate"),
],
),
),
);
}
Related
I'm currently building a scrapping a scrapping application using flutter.
I encounter a problem when I try to display a loader while scrapping, the apparition of the loader seems to totally break the Cross Axis Alignement of my Columns.
First my application looks like this :
https://i.stack.imgur.com/6Tbz7.png
Then, when I hit "scrap button", I update my state in order to display a loader, and this happens :
https://i.stack.imgur.com/0MIi6.png
Here are the two pieces of code rendering the application :
My main class rendering a Flutter logo & my main widget
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlutterLogo(
size: 400,
style: FlutterLogoStyle.horizontal,
),
ScrapBody(),
],
),
),
);
}
}
My main Widget containing rendering management logic as follow
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ScrapForm(
scrap: scrap,
exportToCsv: exportToCsv,
isScrapSuccess: isScrapSuccess,
),
isLoading
// ? Container()
? Column(
children: [
CircularProgressIndicator(),
Text(
"Scrapping page ${pageScrapIndex.toString()} on ${totalPages.toString()}",
),
],
)
: Column(
children: [
ScrapResult(
reviewerListResult: reviewerList,
),
],
),
],
);
}
As you can see, I tried to constraint the widgets that composes my Column with " crossAxisAlignment: CrossAxisAlignment.center" in both parts, but it doesn't work, the widgets keeps goes on the left when I render my loader, and only when I render my loader.
After many searches about the Circuler loader and a look in the widget core,I didn't find anything that could explain my case, any help would be so
appreciated, thanks in advance.
try to wrap your base column with Container and give it's width as double.infinity. and also add crossAxisAlignment: CrossAxisAlignment.center for your circular progress dialog's Column if the first solution doesn't work.
I am using flutter 3.0.0
In my application I am displaying a native video using platform view.
The video is displaying but it is always displaying on upper left corner and it covers other
widgets even they are in a stack.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Stack(
children: [
Center(
child: ConstrainedBox(
constraints:
const BoxConstraints.expand(height: 200, width: 200),
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child:
const AndroidView(viewType: 'remote-video'),
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
MethodChannels.coreMethodChannel
.invokeMethod("load");
},
child: const Text('Invoke'),
),
),
],
),
],
),
);
}
This is how it looks when I run the code
As you can see it is displaying over everything.
Can you provide some advice on how to fix this?
As of 31/07/2022 this seems to be a bug in flutter >= 3.0.0. Following the solution in this question Flutter AndroidView Widget I downgraded to 2.10.5 and then it worked as expected. Hopefully the flutter team will resolve it shortly.
How can I change the color of a ButtonBar in Flutter? There isn't a color in ButtonBarTheme as far as I can tell. I am trying to do something like this:
return Scaffold(
backgroundColor: Colors.red,
body: Center(child: Text('foo')),
// Somehow get the color of these buttons different to backgroundColor
persistentFooterButtons: _buildTextButtons(),
);
The best I can think of at the moment is to somehow reimplement the persistent footer buttons myself, but that is ugly. The problem seems to be that the Scaffold backgroundColor property is used in multiple places, yet is defined in a single widget. This means I can't wrap it in a Theme and override it piecemeal either, as far as I can tell.
Oh, I might have found an answer. I had been using both the bottomNavigationBar and the persistentFooterButtons. persistentFooterButtons are wrapped in a ButtonBar, which appears to limit your styling options.
bottomNavigationBar is a single widget, though, so you can fiddle with it. I switched to just build my own persistentFooterButtons after all.
(I had to edit this from my app, so it might not be copy/paste ready.)
Widget _buildNavigationBar(BuildContext ctx, Color barColor) {
List<Widget> actions = [
// We need the first element to be big, to push everything to the right.
Expanded(
child: Container(),
),
];
actions.addAll(_buildTextButtons(ctx));
Widget actionContainer = ColoredBox(
color: barColor,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: actions,
),
),
);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
actionContainer,
// I use this to make space for ads.
Container(
color: barColor,
height: 50,
),
],
);
}
return Scaffold(
backgroundColor: Colors.red,
body: Center(child: Text('foo')),
// removed this persistentFooterButtons: _buildTextButtons(),
// and replaced with this:
bottomNavigationBar: _buildNavigationBar(ctx),
);
you can also wrap that ButtonBar into Container and After that, you can make any type of changes to that ButtonBar, like coloring etc
There is a widget (for example text). In the real example it comes after another widget in Column. How to put it in the center of the screen? As I understand it, the Column does not. How can this be done? Or are there other ways to specify the location of items?
Column takes all the available space of the parent and by default aligns the items to start
You can change fix this changes the MainAxisAlignment to center.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("test"),
],
),
or changing parents height and move it to the center (be careful if you add many items it will cause overflow)
child: Center(
child: Container(
height: 25,
child: Column(
children: <Widget>[
Text("test"),
],
),
),
),
Using Stack widget you can do it:
var textEmpty = Text("Some Text");
Stack(children: <Widget>[
Column(children: <Widget>[
Container(
,margin: EdgeInsets.only(top: 100.0)
,child: Center(child: textEmpty, ),)],),
listView,
]);
Use Center Wigdet instead of Container. Hope this helps!
No worries where it comes from. It depends on the view where you have added it.
If you want to show in the center then just use Center widget
If you want to use Container widget then, you have to add the width and height both to double.infinite
If you want to use it in the same widget then you can use the Stack widget as well.
It totally depends on the requirement of the view and in which way you are tried to implement it.
I am trying to render a dribbble sample.
In normal android using XML, I can make any part stick to any side of another view. If I were using ConstraintLayout, I could make the bottom part stick to the bottom of the parent and let the top part expand to available height.
The design on both emulators is Flutter code.
On larger screens, there is some empty space on the bottom. How do I remove that?
Currently, I am using Flexible with flex values but it doesn't look right. How to make this reactive?. Is the use of Flexible correct?
The code can found here on pastebin
There is nothing like android:layout_gravity in Flutter, however you can pretty much achieve anything in Flutter. So, here you can use use Spacer(). Like:
return Column(
children: <Widget>[
Spacer(),
Align(alignment: Alignment.centerRight, child: Text("123")),
YourButtonsWidget(),
],
);
try to change CalculatorPrototype's build function like this
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min, // actually this line and the next one doesn't needed
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: display,
),
Container(
child: keypad,
),
],
),
);
}