How to make responsive svg -flutter - flutter

What is the best way to get a responsive svg image, I thought about using MediaQuery, but probably not quite it will fit for every screen.
I used Stack and Positioned because I have more things to lay on one screen that will overlap.
I want to make responsive this:
class Shape extends StatelessWidget {
static Route route() {
return MaterialPageRoute<void>(builder: (_) => Shape());
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
leading: IconButton(
icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
),
body: _profilePage(context),
);
}
Widget _profilePage(BuildContext context) {
return SafeArea(
child: Align(
child: Center(
child: Stack(children: <Widget>[
Positioned(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height,
top: MediaQuery.of(context).size.width * 0.4,
child: _curved(context),
),
]),
),
),
);
// });
}
Widget _curved(BuildContext context) {
return SvgPicture.asset(
'assets/images/shape_curved.svg',
color:Colors.green,
allowDrawingOutsideViewBox: true,
);}

class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
Flexible(
flex: 2,
child: Container(
color: Colors.yellow,
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(80.0),
))),
),
),
Flexible(
child: Container(
color: Colors.green,
child: Container(
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(80.0),
))),
),
),
]),
);
}
}

Related

How to create Hexagon shape Container with flutter same this photo

How to create Hexagon shape Container with flutter same this photo
It can be archived by using Stack and Container's decoration using bottomLeft.
class AWT extends StatefulWidget {
AWT({Key? key}) : super(key: key);
#override
_AWTState createState() => _AWTState();
}
class _AWTState extends State<AWT> {
final border = const BorderRadius.only(
bottomLeft: Radius.circular(140),
);
clickTest(int index) => OutlinedButton(
onPressed: () {
print("tap Event from $index");
},
child: Text("Click test"));
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.pink.shade100,
elevation: 0,
),
body: LayoutBuilder(
builder: (context, constraints) {
final boxheight = constraints.maxHeight / 6;
return Stack(
children: [
//4th container
Container(
height: (boxheight * 4) + kToolbarHeight,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: border,
),
child: clickTest(4),
), //3rd container
Container(
height: (boxheight * 3) + kToolbarHeight,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: border,
),
child: clickTest(3),
), //second container
Container(
height: (boxheight * 2) + kToolbarHeight,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Colors.pink.shade300,
borderRadius: border,
),
child: clickTest(2),
),
// top container
Container(
alignment: Alignment.bottomCenter,
height: boxheight,
decoration: BoxDecoration(
color: Colors.pink.shade100,
borderRadius: border,
),
child: clickTest(1),
),
],
);
},
),
);
}
}

Layout background in flutter

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"),
],
),
);
}
}

How do I put a ListView under a scaffold with padding?

I am quite new to flutter and I've been trying to set up a profile page for my app but it seems like I don't quite understand how these flutter widgets come together, I apologize if my question is quite dumb but I've been googling and failing at getting this to work. So basically I have a scaffold which holds a container thats supposed to display profile info (email, name, etc.), under it I'd like to place a listview, but flutter has been boggling my mind, I can't seem to understand how layouts work together, here is my code. When I try to do buildPage(), I get an error that the scaffold has infinite size, using buildBox() alone works. I'm not sure how to go about this. Any Help is appreciated
import 'package:flutter/material.dart';
class ProfileBox extends StatefulWidget {
final String userEmail;
const ProfileBox(this.userEmail);
#override
_ProfileBoxState createState() => _ProfileBoxState();
}
class _ProfileBoxState extends State<ProfileBox> {
#override
Widget build(BuildContext context) {
return _buildPage();
}
Widget _buildBox(){
return Scaffold(
body: Align(
alignment: Alignment.topCenter,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
margin: const EdgeInsets.only(top: 20.0),
decoration: BoxDecoration(
color: Color(0xFF8185E2), border: Border.all(
color: Color(0xFF8185E2),
),
borderRadius: BorderRadius.all(Radius.circular(20))
),
height: constraints.maxHeight / 2.5,
width: MediaQuery.of(context).size.width - (MediaQuery.of(context).size.width * 5)/100,
child: Center(
child: Text(
widget.userEmail,
textAlign: TextAlign.center,
),
),
);
},
),
),
);
}
Widget _buildPage()
{
return Column(children: <Widget>[
_buildBox(),
_buildList(),
],);
}
Widget _buildList()
{
return ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
);
}
}
I just modified your code with Scaffold put the top Widget before the SafeArea, Please check the below code of it.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return _buildPage();
}
Widget _buildPage() {
return SafeArea(
top: true,
child: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 20.0),
decoration: BoxDecoration(
color: Color(0xFF8185E2),
border: Border.all(
color: Color(0xFF8185E2),
),
borderRadius: BorderRadius.all(Radius.circular(20))),
height: MediaQuery.of(context).size.height / 2.5,
width: MediaQuery.of(context).size.width -
(MediaQuery.of(context).size.width * 5) / 100,
child: Center(
child: Text(
"YOUR_EMAIL",
textAlign: TextAlign.center,
),
),
),
Expanded(
child: _buildList(),
)
],
),
),
);
Column(
children: <Widget>[
// _buildBox(),
_buildList(),
],
);
}
Widget _buildList() {
return ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
);
}
}
And output of the program as follow
Scaffold Widget should be a top Widget that contains the Column widget and all children Widget. I think you can start learning how to layout Widget in Flutter in order to understand more the way how Widget works, and the good place can be: https://flutter.dev/docs/development/ui/layout#lay-out-a-widget
Coming back to your question, you can just fix a bit to make it work:
class _ProfileBoxState extends State<ProfileBox> {
#override
Widget build(BuildContext context) {
return _buildPage();
}
Widget _buildBox() {
return Align(
alignment: Alignment.topCenter,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
margin: const EdgeInsets.only(top: 20.0),
decoration: BoxDecoration(
color: Color(0xFF8185E2),
border: Border.all(
color: Color(0xFF8185E2),
),
borderRadius: BorderRadius.all(Radius.circular(20))),
height: constraints.maxHeight / 2.5,
width: MediaQuery.of(context).size.width -
(MediaQuery.of(context).size.width * 5) / 100,
child: Center(
child: Text(
widget.userEmail,
textAlign: TextAlign.center,
),
),
);
},
),
);
}
Widget _buildPage() {
return Scaffold(
body: Column(
children: <Widget>[
_buildBox(),
_buildList(),
],
),
);
}
Widget _buildList() {
return ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
);
}
}

Flutter :- Custom showDialog with background Color

void _showDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
I need to create this event where at the moment of showing the dialogue window, the other part of the screen changes color, I am having trouble consulting other sources and the truth is that I cannot coincide with the event.
The goal is to achieve something like this:
just pass barrierColor param to showDialog
showDialog(
context: context,
barrierColor: Color(0x640000FF),
builder: (BuildContext context) {
return AlertDialog(
// ...
);
},
);
You just need to show another screen which act as the dialog on the previous screen. For it first you need to use the Stack widget for it. I have created the demo one, please check it once.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutterlearningapp/colors.dart';
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
bool isDialog = false;
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: SafeArea(
top: true,
bottom: true,
child: Stack(
children: <Widget>[
Container(
color: Colors.white,
child: Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
color: Colors.pink,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.4,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {
setState(() {
isDialog = true;
});
},
child: Text("Open Dialog")),
],
),
)),
Positioned.fill(
child: Align(
alignment: Alignment.centerRight,
child: isDialog ? transparentWidget(context) : Container(),
),
)
],
)));
}
Widget transparentWidget(BuildContext context) {
return Container(
color: const Color(0x4D2980b9),
width: double.infinity,
height: double.infinity,
child: Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
)),
child: Center(
child: Text("Your sheet"),
),
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width * 0.8,
),
RaisedButton(
onPressed: () {
setState(() {
isDialog = false;
});
},
child: Text("Cancel"))
],
)),
);
}
}
And thee output of the above program as follow, please check it

Recreating this layout in flutter

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