How to separate into two parts the components of alert dialog as it's shown in the image below.
i.e. "Ok" button separated from main body
there you go a working code
class Demo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[400],
body: Dialog(
elevation: 0,
backgroundColor: Colors.transparent,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 256,
color: Colors.white,
),
const SizedBox(height: 20,),
FlatButton(onPressed: (){}, child: const Text("OK"),shape: const CircleBorder(),color: Colors.white,)
],
),
),
);
}
}
Related
I noticed that having some content inside a SingleChildScroll view and having also a TextField inside it. If i start typing causing the keyboard to open the content under the keyboard get undrawn before the keyboard is completely open. Is that a flutter's bug or am i doing something wrong?
From this video you can see that the content under the keyboard becomes white before it ended open
There is my code
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(),
Container(
height: 200,
color: Colors.red,
),
Container(
height: 200,
color: Colors.purple,
),
Container(
height: 200,
color: Colors.yellow,
),
Container(
height: 200,
color: Colors.green,
),
Container(
height: 200,
color: Colors.blue,
),
],
),
),
),
);
}
}
This happens because Scaffold(); is supposed to draw every widget above keyboard by default.
But adding the property resizeToAvoidBottomInset: false, to Scaffold(); override the default behaviour and hence return the result you're looking for.
Heres the full code
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(),
Container(
height: 200,
color: Colors.red,
),
Container(
height: 200,
color: Colors.purple,
),
Container(
height: 200,
color: Colors.yellow,
),
Container(
height: 200,
color: Colors.green,
),
Container(
height: 200,
color: Colors.blue,
),
],
),
),
),
);
}
}
I like to increase the height of the widget "B" so the orange color use the same space like the green color. I have added a code example.
If a added Extended() like Expanded(Container(Text('B'))) the full horizontal space of the screen is used.
If a added Extended() like Column(Expanded(Container(Text('B')))) the full vertical space of the screen is used.
Does someone has a hint?
Thank you in advance!
Gretings
Michael
Problem:
Goal:
Code:
import 'package:flutter/material.dart';
void main() {
runApp(DemoX());
}
class DemoX extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.red,
child: Container(
color: Colors.green,
child: Text('A1\nA2'),
),
),
Container(
color: Colors.orange,
child: Text('B'),
),
],
),
),
),
);
}
}
Screenshot
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: IntrinsicHeight(
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.green,
child: Text('A1\nA2'),
),
Container(
color: Colors.orange,
child: Text('B'),
),
],
),
),
),
);
}
Click here for picture
hi everyone, i need help making my profile page in flutter look like the image above. im not really know how make it bc there so much details in it.
this is the code i make so far:
import 'package:flutter/material.dart';
void main() => runApp(new UserDetails());
class UserDetails extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'User Details',
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
leading: Icon(Icons.arrow_back),
title: Text('Edward',
style: TextStyle(color: Colors.black),
),
actions: <Widget>[
Icon(Icons.more_vert, color: Colors.white,),
],
),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 200.0,
color: Colors.green,
child: Center(
child: Icon(Icons.person, size: 250.0 ),
),
)
],)
]
),
),
);
}
}
You can achieve that adding a border radius to the Container, then use a Column to position and arrange your texts: a Column widget in this case. You need, also, set theAppBar in the Scaffold to same background color which Container has, and set elevation to zero to avoid the shadow over the containter, if you need help with this latter, let me know.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 260,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.grey,
child: Align(
alignment: Alignment.bottomCenter,
child: Icon(Icons.people, size: 50),
),
radius: 35,
),
Text("#edward"),
Text("email#email.com"),
Text("No: 00X-XXX-XXX"),
],
),
);
}
}
I want the blue to be full.
But it only spreads up to half.
https://i.stack.imgur.com/UQsiB.png
class TestScene extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
fit: FlexFit.loose,
child: Container(
color: Colors.red,
child: const Text('1'),
),
),
Flexible(
fit: FlexFit.loose,
child: Container(
color: Colors.blue,
child: const Text('1234567890123456789012345678901234567890'),
),
),
],
),
);
}
}
The reverse will also fail.
https://i.stack.imgur.com/rf00I.png
In both cases, it's nice.
https://i.stack.imgur.com/21ORb.png
This is a way ! (To take remain space)
String one='1',two='1234567890123456789012345678901234567890';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
backgroundColor:Colors.white,
body: Row(
mainAxisSize:MainAxisSize.max,
children: <Widget>[
one.length>=two.length ?
Expanded(
child: Container(
color: Colors.red,
child: Text(one),
),
):Container(
color: Colors.red,
child: Text(one),
),
two.length>=one.length ?
Expanded(
child: Container(
color: Colors.blue,
child: Text(two),
),
):Container(
color: Colors.blue,
child: Text(two),
),
],
),
);
}
Or to maintain equal size with colors simply use Expanded in both widgets
Wrap the one that you want to fill the space by Expanded. If you want both red and blue to fill the row, wrap both of them with Expanded and give them their own ratio with the flex property
class TestScene extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Row(
children: <Widget>[
Container(
color: Colors.red,
child: const Text('1'),
),
Expanded(
child: Container(
color: Colors.blue,
child: const Text('1234567890123456789012345678901234567890'),
),
),
],
),
);
}
}
I want to make this layout in flutter:
Layout
It consists of five buttons in which the fifth button is on the middle of the other four and gives a illusion that the other buttons are not rectangles.
Is this even possible in flutter? Some guidelines would be welcome.
Thanks.
You can do it using Stack widget to position the Circle button at the center.
This is an example I made:
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey[800],
body: Center(
child: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyButton(),
MyButton(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyButton(),
MyButton(),
],
),
],
),
Center(
child: MyCircleButton(),
),
],
),
),
);
}
}
class MyButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: 120,
margin: EdgeInsets.all(5),
height: 120,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
print("On click");
},
),
),
);
}
}
class MyCircleButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(60.0)),
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10.0),
),
child: Material(
color: Colors.transparent,
child: InkWell(
highlightColor: Colors.red,
onTap: () {
print("On circle click");
},
),
),
),
);
}
}
Try reading more about Flutter layouts, here you have a lot of information : https://flutter.dev/docs/development/ui/layout