Related
can someone Please help me clone this ui I got it from Dribble and Im facing the problem with the box radius.
I tried using a stack but it doesnt show the container radius maybe i need to use a custom widget.
Please any help is needed i am stuck on this problem.
Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title:Text(DateTimeFormat.format(DateTime.now(),format: 'D M, Y')
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 26
),),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {
},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(Icons.maximize_outlined,size: 70,color: Colors.white60,),
)
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15
)
]
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text("History of Tips",style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black
),),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(width: 150,),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(color: Colors.black,),
Text("Status")
],
)
],
),
],
)
)
],
),
),
),
],
),
),
);
I added in some box shadow and some different colors but still it's not quite right.
You need to add the appbar inside your body like this:
Scaffold(
key: _scaffoldKey,
backgroundColor: Color(0xff405cbf),
body: Stack(
children: [
AppBar(
title: Text(
DateTimeFormat.format(DateTime.now(), format: 'D M, Y'),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26),
),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(
Icons.maximize_outlined,
size: 70,
color: Colors.white60,
),
)),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15)
]),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text(
"History of Tips",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(
width: 150,
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(
color: Colors.black,
),
Text("Status")
],
)
],
),
],
))
],
),
),
),
],
),
),
],
),
)
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"))
]
),
),
),
],
)
),
);
}
}
I wrote a page, at the top everything is fine, as it should be. And at the bottom I have a history of events. The width of my container is determined automatically (depending on the width of the screen), and the height - no, on different devices different heights (indents at the bottom are different). Is it possible to determine the height automatically (to the end of the screen) ?? Also, I'd like to add a scroll bar at the bottom for this container so that when events appear there, I can scroll through them both bottom and top. I will be grateful for your help.
My page:
My code:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color:Colors.white12
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('yes',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('no',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
)
],
),
SizedBox(height: 15.0),
Container(
child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0,color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
Container(
child: Text("weight", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
padding: EdgeInsets.only(top: 2, bottom:40, left:0, right:0),
),
Center(
child: Container(
alignment: Alignment.center,
width: double.infinity,
height: 430,
decoration: BoxDecoration(
border: Border.all(
width: 1.5
),
borderRadius: BorderRadius.circular(25)
),
child: new Column(
children: [
Container(
child: Text("history events", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)
),
],
),
)//Container
)
]
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_scanQR();
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}
My scrin (after updating the code)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('yes', textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('no', textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
)
],
),
SizedBox(height: 15.0),
Container(
child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0, color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
Container(
child: Text("weight", style: TextStyle(fontSize: 20.0, color: Colors.blueGrey)),
padding: EdgeInsets.only(top: 2, bottom: 40, left: 0, right: 0),
),
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(7, 0, 7, 7),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(border: Border.all(width: 1.5), borderRadius: BorderRadius.circular(25)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 45,
child: Text("history events", style: TextStyle(fontSize: 25.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
Expanded(
child: Scrollbar(
child: new ListView(
shrinkWrap: true,
children: [
Container(
child: Text("Event 1", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 200,
),
Container(
child: Text("Event 2", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 200,
),
Container(
child: Text("Event 3", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 50,
),
],
))),
],
))))
]),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
// _scanQR();
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}
You can alter the responsive height or width by using Media Query .To do that you need to wrap your Scaffold with Material App or Cupetino App which allows you to use MediaQuery .
void main() {
runApp(MaterialApp(home: MyApp()));
}
To make the list scrollable simply you can use ListView.builder
Center(
child: Container(
margin: new EdgeInsets.only(bottom: 20,right: 15,left: 15),
alignment: Alignment.center,
width: double.infinity,
height: MediaQuery.of(context).size.height/1.5,
decoration: BoxDecoration(
border: Border.all(width: 1.5),
borderRadius: BorderRadius.circular(25)),
child: new Column(
children: [
Container(
child: Text("history events",
style: TextStyle(
fontSize: 20.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
],
),
) //Container
)
I added a little margin to make it looks better.Ofcourse you can also use MediaQuery for margin or padding if you want to.
https://i.stack.imgur.com/W6oXd.png
I'm really new to Flutter. In the homepage, I intend to build the page something like this:
The other widgets are working pretty fine, but when I come to developing the double button like the design that overlapping the container widgets below, it's not working at all.
My first approach is using Stack which contain Positioned widgets (for the double button) and Container (for the other things). But, the Positioned widgets despite having a dummy child widget is not visible at all, whereas the Container is perfectly working. I don't know whether the Positioned is written in a wrong way, or else.
Here's the source code:
https://github.com/andre-nk23/packme/blob/master/lib/main.dart
Can anyone help me here? To make those two button overlapping the container? Thank you.
Note : I'm using several imported packages, please notify me if those packages affects the process of developing the overlap double button.
void main() => runApp(MaterialApp(
home: BottomNavBar(),
));
class BottomNavBar extends StatefulWidget {
#override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
// ignore: unused_field
int _page = 0;
String tabAccent = '#B9EEDC';
String pinkAccent = '#FF8787';
String greenAccent = '#43D1A5';
String blueAccent = '#030835';
String buttonAccent = '#CDF0E0';
GlobalKey _bottomNavigationKey = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
drawer: new Drawer(
child: ListView(
children: [
Container(
height: 210,
child: DrawerHeader(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleAvatar(
backgroundImage: AssetImage('assets/img.jpeg'),
maxRadius: 30,
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Julian Casablancas',
textScaleFactor: 1.6,
),
Padding(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Text(
'julian.c#gmail.com',
textScaleFactor: 1.1,
),
)
],
)
]),
decoration: BoxDecoration(color: HexColor('#CDF0E0')),
),
),
ListTile(
leading: Icon(FeatherIcons.home, color: HexColor('#030835')),
title: Text('Beranda', textScaleFactor: 1.2),
tileColor: HexColor('#CDF0E0'),
selectedTileColor: HexColor('#A4E7CE'),
),
ListTile(
leading: Icon(Icons.person_outlined,
size: 25, color: HexColor('#030835')),
title: Text('Profil', textScaleFactor: 1.2),
tileColor: HexColor('#CDF0E0'),
selectedTileColor: HexColor('#A4E7CE')),
ListTile(
leading: Icon(FeatherIcons.clock, color: HexColor('#030835')),
title: Text('Riwayat', textScaleFactor: 1.2),
tileColor: HexColor('#CDF0E0'),
selectedTileColor: HexColor('#A4E7CE')),
ListTile(
leading: Icon(FeatherIcons.moon, color: HexColor('#030835')),
title: Text('Mode gelap', textScaleFactor: 1.2),
tileColor: HexColor('#CDF0E0'),
selectedTileColor: HexColor('#A4E7CE')),
ListTile(
leading: Icon(Icons.attach_money, color: HexColor('#030835')),
title: Text('Gabung kami', textScaleFactor: 1.2),
tileColor: HexColor('#CDF0E0'),
selectedTileColor: HexColor('#A4E7CE')),
ListTile(
leading: Icon(Icons.info_outline_rounded,
color: HexColor('#030835')),
title: Text('Informasi', textScaleFactor: 1.2),
tileColor: HexColor('#CDF0E0'),
selectedTileColor: HexColor('#A4E7CE')),
ListTile(
leading:
Icon(Icons.settings_outlined, color: HexColor('#030835')),
title: Text('Pengaturan', textScaleFactor: 1.2),
tileColor: HexColor('#CDF0E0'),
selectedTileColor: HexColor('#A4E7CE')),
ListTile(
leading: Icon(Icons.logout, color: HexColor('#030835')),
title: Text('Keluar', textScaleFactor: 1.2),
tileColor: HexColor('#CDF0E0'),
selectedTileColor: HexColor('#A4E7CE')),
],
),
),
appBar: PreferredSize(
preferredSize: Size.fromHeight(80.0),
child: AppBar(
centerTitle: true,
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
leading: Padding(
padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: new IconButton(
icon: new Icon(Icons.donut_large_rounded,
size: 25, color: HexColor('#030835')),
onPressed: () => _scaffoldKey.currentState.openDrawer(),
color: HexColor('#B9EEDC')),
),
actions: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 20, 30, 0),
child: Image(
image: AssetImage('assets/img.jpeg'),
height: 40,
),
),
],
),
),
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: 0,
height: 60.0,
items: <Widget>[
Icon(Icons.qr_code_rounded, size: 30),
Icon(Icons.attach_money_rounded, size: 30),
Icon(FeatherIcons.box, size: 30),
],
color: HexColor('#B9EEDC'),
buttonBackgroundColor: HexColor('#B9EEDC'),
backgroundColor: HexColor('#ECFBF4'),
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 300),
onTap: (index) {
setState(() {
_page = index;
});
},
),
body: SafeArea(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Stack(overflow: Overflow.visible, children: <Widget>[
Container(
margin: EdgeInsets.only(top: 25.0),
width: 500,
color: HexColor('#ECFBF4'),
child: Padding(
padding: EdgeInsets.fromLTRB(30, 35, 30, 55),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(FeatherIcons.info, size: 25),
Icon(FeatherIcons.clock, size: 25)
],
),
SizedBox(height: 10),
Text(
'Scan QR',
style: GoogleFonts.poppins(
textStyle: Theme.of(context).textTheme.headline1,
fontSize: 28,
fontWeight: FontWeight.w700,
color: HexColor('#030835'),
),
),
SizedBox(height: 2),
Text(
'di restoran / driver',
style: GoogleFonts.poppins(
textStyle: Theme.of(context).textTheme.headline1,
fontSize: 18,
fontWeight: FontWeight.w400,
color: HexColor('#030835'),
),
),
Text(
'untuk mulai meminjam',
style: GoogleFonts.poppins(
textStyle: Theme.of(context).textTheme.headline1,
fontSize: 18,
fontWeight: FontWeight.w400,
color: HexColor('#030835'),
),
),
],
),
),
),
/* Here are the changes */
Positioned(
left: 75,
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.check_box),
),
),
Positioned(
right: 75,
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.check_box),
),
),
]),
],
),
),
),
);
}
}
Hello Andrea, this is the necessary code which you can implement perfectly. Well, I have removed the redundant widgets which was been used to make the code cleaner.The stack was used by me to implement your question.
Have you tried Stack? You can approach this many ways, I just made this in a rush.have a look
Container(
height: 280,
width: 400,
child: Stack(
children: [
Positioned(
bottom: 0,
child: Container(
height: 250,
width: 400,
decoration: BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30),
)
),
),
),
Positioned(
top: 0,
right: 100,
child: FloatingActionButton(
onPressed: (){},
child: Icon(
Icons.check_box
),
),
),
Positioned(
top: 0,
left: 100,
child: FloatingActionButton(
onPressed: (){},
child: Icon(
Icons.check_box
),
),
),
],
),
)
Use Row For Positioning both of the Buttons in container.
Container(
height: 280,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Positioned(
bottom: 0,
child: Container(
height: 250,
width: 400,
decoration: BoxDecoration(
color: Colors.pinkAccent,
),
),
),
Positioned(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
FloatingActionButton(
onPressed: (){},
child: Icon(
Icons.person
),
),
FloatingActionButton(
onPressed: (){},
child: Icon(
Icons.face
),
),
],
),
),
],
),
)
I want to fix my first container on Top when my card crossed on scrolling
And This is my code:
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new SizedBox(height: 25.0,),
new Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("Top Fix",style: TextStyle(fontSize: 20.0)),
new SizedBox(width: 30.0,),
new CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
],
),
color: Colors.orange,
),
new Container(
height: 200.0,
width: double.infinity,
child: Container(
margin: EdgeInsets.only(top: 40.0),
child: Text(
"Welcome To \n Flutter",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(50.0),
bottomRight: new Radius.circular(50.0),
),
color: Colors.orange),
),
new Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
transform: Matrix4.translationValues(0.0, -40.0, 0.0),
child: new Card(
clipBehavior: Clip.antiAlias,
color: Colors.orange[300],
child: Row(
children: [
new Container(
margin: EdgeInsets.all(5.0),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
),
new Container(
child: Column(
children: [
new Text(
"Hello Every One This is Flutter Tutorial",
style: TextStyle(color: Colors.white),
),
new Container(
child: Row(
children: [
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
],
)),
],
)),
],
),
elevation: 2.0,
),
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 1"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 2"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 3"),
),
),
],
),
// ),
);
I want to fix my first container and also change my color orange to green.
You can use stack like this:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final double heightOfFirstContainer = 100.0;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: [
Scaffold(
backgroundColor: Colors.green,
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: heightOfFirstContainer,
),
new Container(
height: 200.0,
width: double.infinity,
child: Container(
margin: EdgeInsets.only(top: 40.0),
child: Text(
"Welcome To \n Flutter",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(50.0),
bottomRight: new Radius.circular(50.0),
),
color: Colors.orange),
),
new Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
transform: Matrix4.translationValues(0.0, -40.0, 0.0),
child: new Card(
clipBehavior: Clip.antiAlias,
color: Colors.orange[300],
child: Row(
children: [
new Container(
margin: EdgeInsets.all(5.0),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
),
new Container(
child: Column(
children: [
new Text(
"Hello Every One This is Flutter Tutorial",
style: TextStyle(color: Colors.white),
),
new Container(
child: Row(
children: [
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
],
)),
],
)),
],
),
elevation: 2.0,
),
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 1"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 2"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 3"),
),
),
],
),
// ),
),
),
Positioned(
child: new Container(
height: heightOfFirstContainer,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("Top Fix", style: TextStyle(fontSize: 20.0)),
new SizedBox(
width: 30.0,
),
new CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
],
),
color: Colors.orange,
),
),
],
),
);
}
}