Centering a widget flutter - flutter

Hi I want to center a card which should be centered horizontally and vertically I am trying to acheive this via center widget Any idea how do i accomplish this task
This is what i am getting:
Here is my full updated code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:provider/provider.dart';
import '../BackEnd/AuthenticationService.dart';
import 'Register.dart';
class PatientList extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Container(
height: 174,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/patient_list.png'),
)),
child: Stack(
children: <Widget>[
Container(
alignment: Alignment.center,
height: 128,
child: Text(
'Patient List',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
color: Colors.white),
),
),
Center(
child: Container(
height: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: BorderSide(color: Color.fromRGBO(214, 0, 27, 1)),
),
child: Center(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 10),
child: Row(
children: <Widget>[
Container(
child: Text("hello#xyz.com",
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black,
fontSize: 16)),
),
],
),
),
],
),
),
),
),
),
Container(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () {
context.read<AuthenticationService>().signOut();
},
style: ElevatedButton.styleFrom(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(color: Colors.red),
),
primary: Color.fromRGBO(214, 0, 27, 1)
),
child: Text(' Sign Out'.toUpperCase())
),
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
gotoRegister(BuildContext context) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Register()),
);
}
gotoRegister(context);
},
child: Icon(Icons.add),
backgroundColor: Color.fromRGBO(214, 0, 27, 1),
),
);
}
}
I want to center that card horizontally and vertically in the middle of the activity I hope i am now clear with my objectives as to what i want to achieve

Do you want to center the Text inside the card or the card itself? Generally just wrap it with a Center widget.
Your problem might be that you use row and column in the wrong place. Please share the complete code, to let me see what needs to be changed.
Center(
child: Container(
height: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: BorderSide(color: Color.fromRGBO(214, 0, 27, 1)),
),
child: Center(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 10),
child: Row(
children: <Widget>[
Container(
child: Text("hello#xyz.com",
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black,
fontSize: 16)),
),
],
),
),
],
),
),
),
),
);

This should be what you are looking for.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:provider/provider.dart';
import '../BackEnd/AuthenticationService.dart';
import 'Register.dart';
class PatientList extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 174,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/patient_list.png'),
),
),
child: Stack(
children: <Widget>[
Container(
alignment: Alignment.center,
height: 128,
child: Text(
'Patient List',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30, color: Colors.white),
),
),
Center(
child: Container(
height: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: BorderSide(color: Color.fromRGBO(214, 0, 27, 1)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 10),
child: Row(
children: <Widget>[
Container(
child: Text(
"hello#xyz.com",
style: TextStyle(fontWeight: FontWeight.normal, color: Colors.black, fontSize: 16),
),
),
],
),
),
Container(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () {
context.read<AuthenticationService>().signOut();
},
style: ElevatedButton.styleFrom(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(color: Colors.red),
),
primary: Color.fromRGBO(214, 0, 27, 1),
),
child: Text(
' Sign Out'.toUpperCase(),
),
),
),
],
),
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Register()),
);
},
child: Icon(Icons.add),
backgroundColor: Color.fromRGBO(214, 0, 27, 1),
),
);
}
}

Related

How to make this container in flutter?

enter image description here
I wan to make this container and I have try it making in container by dividing it in 2 row. After that I divide first row in 3 row again but It was not same design made. So, please help me to make this.
Take a look at https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e. It's great tutorial for Flutter layout positioning. Have fun!
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 150,
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: const Color(0xff272830),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
header(),
const Text(
'To register, fill out the form in the sign-up section above. In order to activate your account, we will send you an invitation email that you must confirm'),
],
),
);
}
Widget header() {
return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Row(mainAxisSize: MainAxisSize.min, children: [
ClipOval(
child: Image.network(
'https://dt2sdf0db8zob.cloudfront.net/wp-content/uploads/2019/12/9-Best-Online-Avatars-and-How-to-Make-Your-Own-for-Free-image1-5.png',
width: 40,
height: 40,
fit: BoxFit.cover,
),
),
const SizedBox(width: 5),
Text('SIGN UP'),
]),
SizedBox(
height: 40,
child: OutlinedButton(
onPressed: () {},
child: const Text('Step 1',
style: TextStyle(
color: Colors.white,
)),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
)
]);
}
}
Try this
Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(12, 12, 12, 12),
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(
Radius.circular(20),
)),
child: Column(
children: [
Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
'https://picsum.photos/id/237/200/300'),
),
SizedBox(
width: 20,
),
Expanded(
child: Text(
"SIGN UP",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.fromLTRB(24, 12, 24, 12),
decoration: BoxDecoration(
color: Colors.grey,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(16),
)),
child: Text("Step 1"),
),
],
),
SizedBox(
height: 8,
),
Container(
child: Text(
"To register, fill out the form in the sign-up section above. In order to activate your account, we will send you and activation email that you must confirm"),
),
],
),
)
],
),
Instead of container, you can do it by using Card. Take a look at this example from https://api.flutter.dev/flutter/material/Card-class.html
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextButton(
child: const Text('BUY TICKETS'),
onPressed: () {/* ... */},
),
const SizedBox(width: 8),
TextButton(
child: const Text('LISTEN'),
onPressed: () {/* ... */},
),
const SizedBox(width: 8),
],
),
],
),
),

Flutter UI Place button on the edge of two containers

How to create an UI like above just the part where the Edit Profile button is on the edge of both the containers ? I used stack and positioned but didnt work out for me . Can somebody help me with this . How to approach this .
try this code no perfect but it will give you some idea
Container(
height: double.infinity,
width: double.infinity,
color: Colors.red,
child: Stack(children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 300.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 8.0,
offset: Offset(0.0, 5.0),
),
],
),
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
child: Column(
children: <Widget>[
const SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
],
),
)
],
)),
),
Container(
width: 80,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
borderRadius: BorderRadius.circular(15.0), ),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Center(
child: Container(
child: const Text('Edit Profile'),
),
),
),
),
],
),
),
]),
);
Instead of using Stack you can use Transform.translate to shift the TextButton up by the half of its height:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: Column(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
color: Color(0xFFF09384),
),
),
Expanded(
flex: 3,
child: Container(
alignment: Alignment.topCenter,
color: Color(0xFF3E8C92),
child: Column(
children: [
Transform.translate(
offset: Offset(0,-35/2), // Here you insert the half of the button height
child: TextButton(
onPressed: () => print("Hello"),
child: Text("Edit Profile"),
style: TextButton.styleFrom(
fixedSize: Size(120, 35), // Here you should fix the size of the button
backgroundColor: Colors.white,
primary: Color(0xFF3E8C92),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
)
),
),
),
...List<Text>.filled(5, Text("Data"))
]
),
),
),
],
)
),
);
}
}

Adding an image background to home page

I am trying to add a background to my home page, however, it does not seem to be working. Any thoughts? I know how to add it per se, but unsure of how to structure it. I had received some advice to use a Stack, but I am unfamiliar with this method and the resources online are not clear.
Any advice on how to structure this would be appreciated.
Here is the background image code:
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/startbackground.jpg"),
fit: BoxFit.cover),
),
and here is the page code itself.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.orangeAccent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.teal,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style:
TextStyle(color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
);
}
}
It's confusing, but we don't actually need a DecoratedBox, rather a BoxDecoration (inside your container, for the decoration: argument).
:P
Here's an example:
class BackgroundImagePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.orangeAccent, // this has been moved up into BoxDeco
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://i.pravatar.cc/300'
)
)
),
height: double.infinity,
width: double.infinity,
... <snip> ...
If the Scaffold is a child of the background image code, than I guess the Scaffold background color is hiding the image.
Set transparent background color for the Scaffold:
Scaffold(
backgroundColor: Color.transparent,
...
This ended up working. See below.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Image.asset(
"assets/startbackground.jpg",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
body: Container(
color: Colors.transparent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60,fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style: TextStyle(
color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
)
]);
}
}

Alignment issues with Stack flutter

I have design that shows flash offers count but when i tried to design like the following image the alignment of widgets do not work properly. How do i approach this design? I have tried many codes but i am not getting the desired results.
The design i am trying to create
The design i did so far
Code
Widget FlashOffers(){
return GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width:350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))
),
),
Center(child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Flash Offers",style: TextStyle(fontSize: 18,color: Colors.white,fontWeight: FontWeight.bold),),
)),
Row(
// crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Stack(
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
],),
],
),
),
);
}
Try this: Remove your row widget and add alignment: Alignment.center to stack that is in the row. Wrap you Stack with Align Widget and add alignment: Alignment.centerRight
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width: 350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
)),
Align(
alignment: Alignment.centerRight,
child: Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
),
],
),
),
);
}
You should consider adding the label and counter icon inside the container widget.
Your code should look something like this:
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 50,
width: 350,
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3"),
],
)
],
),
),
),
);
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: Center(
child: flashOffers(),
),
),
),
);
}
Widget flashOffers() {
return GestureDetector(
onTap: () {
print('new route push');
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 350,
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFc1202e),
Color(0xFFea2127),
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.all(
Radius.circular(30),
),
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: Offset(-10, 10),
color: Colors.black26,
),
]),
child: Row(
children: [
Expanded(
child: Text(
"Flash Offers".toUpperCase(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Stack(
alignment: Alignment.center,
children: [
Icon(
Icons.folder,
size: 30,
color: Colors.yellowAccent,
),
Text(
'3',
style: TextStyle(color: Colors.red),
),
],
),
SizedBox(width: 10),
],
),
),
),
);
}
}
Here is the example without using Stack. Hope you will get the idea and it will help :-)
return MaterialButton(elevation: 8,
color: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0)
),
child: Row(children: [
Expanded(child: Text('FLASH OFFER', textAlign: TextAlign.center)),
CircleAvatar(
backgroundColor: Colors.yellow, radius: 12, child: Text("2"))
]),
onPressed: () {
print('button pressed');
});
Edit: To show the shadow, use the elevation property of button. You can also change the shadow color
You can use positioned,it is so useful in stack widget.
Look at this:
https://medium.com/codespace69/flutter-widget-positioning-eca4fea1528b#:~:text=A%20Stack%20allows%20you%20to,the%20children%20of%20a%20stack.
Try this
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
),
child: FlatButton(
splashColor: iconButton,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadiusDirectional.circular(20)),
color: primaryColor,
onPressed: () {
sendMail();
},
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Text(
"Send",
style: styleText(
size: 20,
weight: FontWeight.bold,
color: white),
),
Container(
child: Center(
child: SvgPicture.asset(
ic_profileWhite,
height: 20,
width: 20,
),
),
),
],
),
),
),
),

Custom Button in Flutter

What I am trying to achieve is below:
Should I be using Row with Icon and Text?
Here is my code and its output
RaisedButton(
elevation: 10,
onPressed: () {},
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 55,
color: Colors.deepPurple,
child: Icon(
Icons.settings,
color: Colors.white,
),
),
Text(
'Settings',
style: TextStyle(
fontSize: 25,
),
),
],
),
),
);
OUTPUT:
Any help would be appreciated.
Here you go
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(), //.copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
get borderRadius => BorderRadius.circular(8.0);
#override
Widget build(BuildContext context) {
return Center(
child: Material(
elevation: 10,
borderRadius: borderRadius,
child: InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.all(0.0),
height: 60.0,//MediaQuery.of(context).size.width * .08,
width: 220.0,//MediaQuery.of(context).size.width * .3,
decoration: BoxDecoration(
borderRadius: borderRadius,
),
child: Row(
children: <Widget>[
LayoutBuilder(builder: (context, constraints) {
print(constraints);
return Container(
height: constraints.maxHeight,
width: constraints.maxHeight,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: borderRadius,
),
child: Icon(
Icons.settings,
color: Colors.white,
),
);
}),
Expanded(
child: Text(
'Settings',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
),
),
),
],
),
),
),
),
);
}
}
John Joe's answer is correct. Here is another solution that does the same with plain Container widget. I am posting it here just in case someone interested.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: MyWidget(),
),
],
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
height: 48.0,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 2.0),
blurRadius: 8.0,
spreadRadius: 2.0)
]),
child: Stack(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 48.0,
height: 48.0,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
child: Align(
alignment: Alignment.center,
child: Icon(Icons.settings))),
Expanded(
child: Center(
child: Text("Hellow world",
style: Theme.of(context)
.textTheme
.headline6
.copyWith(color: Colors.black)),
)),
],
),
SizedBox.expand(
child: Material(
type: MaterialType.transparency,
child: InkWell(onTap: () {}),
),
),
],
),
),
);
}
}
See the live demo here.
You can use Column and Row.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
_firstWidget(),
SizedBox(height: 15),
_secondWidget(),
],
)),
);
}
Widget _firstWidget() {
return InkWell(
onTap: () {},
child: Card(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 55,
width: 30,
decoration: myBoxDecoration(),
child: Icon(
Icons.settings,
color: Colors.white,
),
)),
Expanded(
flex: 3,
child: Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Programs & Services',
style: TextStyle(
fontSize: 25,
),
))),
],
),
));
}
Widget _secondWidget() {
return InkWell(
onTap: () {},
child: Card(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
decoration: myBoxDecoration(),
height: 55,
width: 30,
child: Icon(
Icons.settings,
color: Colors.white,
),
)),
Expanded(
flex: 3,
child: Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Settings',
style: TextStyle(
fontSize: 25,
),
))),
],
),
));
}
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}
Output
Darish's answer seems to me the best, since the splash is displayed on top of everything and makes a very good visual effect.
Even so, since the answer is from so long ago, I wanted to put here the updated code to NullSafety and also correct some bugs and remove unnecessary things.
For the rest it is perfect.
Here my code:
class MyWidget extends StatelessWidget {
const MyWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: const [
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 2.0),
blurRadius: 8.0,
spreadRadius: 2.0,
)
],
),
child: SizedBox(
height: 48,
child: Stack(
children: [
Row(
children: <Widget>[
Container(
width: 48.0,
height: 48.0,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Icon(Icons.settings, color: Colors.white),
),
),
const Expanded(
child: Center(
child: Text("Hellow world"),
),
),
],
),
Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
borderRadius: BorderRadius.circular(8.0),
),
),
],
),
),
);
}
}