Related
This is my code
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// backgroundColor: Colors.white,
// automaticallyImplyLeading: false,
// ),
body: SingleChildScrollView(
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(top: 20, bottom: 20),
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
"Dashboard",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
)),
decoration: BoxDecoration(color: const Color(0xff09325E)),
),
Positioned(
top: 85,
child: Container(
width: 470,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15.0)),
child: Container(
// height: 500,
// height: MediaQuery.of(context).size.height - 90,
child: Column(
children: [
SizedBox(
width: 400,
height: 100,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Kasus Tertinggi",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
)),
Divider(color: Color(0xffD3D3D3)),
Column(children: [
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
])
],
),
),
))
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
// Navigator.of(context).pushNamed('/create');
}),
tooltip: 'Add Product',
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
iconSize: 30.0,
// padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
// Navigator.of(context).pushNamed('/home');
},
),
IconButton(
iconSize: 30.0,
// padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.person),
onPressed: () {
Navigator.of(context).pushNamed('/profile');
},
)
],
),
),
),
);
}
}
I have try using singlechild SingleChildScrollView but it's not working, how to make scrollable whole screen include appbar scaffold?
Use CustomScrollView, I did some refactoring to your code
import sliver_tools package for sliverStack
import 'package:sliver_tools/sliver_tools.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
// ignore: library_private_types_in_public_api
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
const SliverAppBar(
title: Text(
'AppBAR',
style: TextStyle(color: Colors.indigo),
),
),
SliverPadding(
padding: const EdgeInsets.only(bottom: 20),
sliver: SliverStack(
insetOnOverlap: false,
children: [
SliverToBoxAdapter(
child: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(top: 20, bottom: 20),
decoration: const BoxDecoration(color: Color(0xff09325E)),
child: const Padding(
padding: EdgeInsets.all(20),
child: Text(
"Dashboard",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
)),
),
),
SliverPositioned.fill(
top: 80,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
offset: Offset(0, 4),
blurRadius: 8,
color: Color.fromRGBO(0, 0, 0, 0.1),
),
]),
),
),
SliverPositioned.fill(
top: 100,
child: SliverPadding(
padding: const EdgeInsets.fromLTRB(15, 8, 15, 0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) {
return Column(
children: [
Container(
margin: const EdgeInsets.only(top: 100),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: const [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: const [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
const Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Divider(color: Color(0xffD3D3D3)),
),
],
);
},
childCount: 6,
),
),
),
),
],
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
Navigator.of(context).pushNamed('/create');
}),
backgroundColor: Colors.indigo,
tooltip: 'Add Product',
child: const Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
//Navigator.of(context).pushNamed('/home');
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.person),
onPressed: () {
// Navigator.of(context).pushNamed('/profile');
},
)
],
),
),
),
);
}
}
How can I make the responsive Content in Container,
when I put anything in a container and the Height content is oversize what is the solution for this? I need to fix it when the user input too much information about the post and I warp it with less/more plugins and when the user uses it the screen is over pixel for sure
I use media query on the container that means I fix the size is okay so it's will happen if too much text
Widget _postWidget() {
return Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(''),
fit: BoxFit.cover,
),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: '[C]post.username ',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.bold),
children: const <TextSpan>[
TextSpan(
text: '3h',
style: TextStyle(
color: Colors.grey,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.w400)),
],
),
),
Text(
'[user]Desuka',
style: TextStyle(
color: Colors.grey[500],
fontFamily: 'SukhumvitSetMedium',
),
)
],
),
),
),
Expanded(
flex: 2,
child: SizedBox(
width: 200.0,
height: 30.0,
child: OutlinedButton(
child: Text(
'Join+',
style: TextStyle(
color: HexColor("7225FF"),
),
),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(
width: 1.5,
color: HexColor("7225FF"),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
))),
],
),
),
),
InkWell(
child: Container(
margin: const EdgeInsets.only(
top: 10,
bottom: 10,
right: 20,
left: 20,
),
width: double.infinity,
height: 170.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
image: DecorationImage(
image: NetworkImage(
'https://gitlab.com/2Shours/alphapic/raw/master/22.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
Text(
'Travis Scott x Nike Fregment',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontSize: 16,
fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
ReadMoreText(
'The Flutter framework builds its layout via the composition of widgets, everything that you construct programmatically is a widget and these are compiled together to create the user interface. ',
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontFamily: 'SukumvitSetMedium'),
trimLines: 2,
colorClickableText: HexColor("7225FF"),
trimMode: TrimMode.Line,
trimCollapsedText: 'More',
trimExpandedText: ' Less',
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe902,
fontFamily: 'heartPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Like post'),
),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 10.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(
IconData(0xe901, fontFamily: 'commentPost')),
iconSize: 20.0,
onPressed: () {}),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 20.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(IconData(0xe906, fontFamily: 'offerPost')),
iconSize: 20.0,
onPressed: () {},
),
Text(
'Offer',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
],
),
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
],
),
),
],
),
);
}
I am currently working on a project and pretty new to flutter. I am finding it difficult to achieve this outlook. Please any help will be appreciated. This is a header of an application and this is what I have done so far. Thank you.
class HeaderWiget extends StatelessWidget {
final Color colors = Colors.amber;
return Container(
Colors: colors,
padding: const EdgeInsets.only(
top: 30,
bottom: 10,
left: 20,
right: 20,
),
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Row(
children: [`enter code here`
Column(
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
);
}
you can use code below:
class HeaderWiget extends StatelessWidget {
final Color colors = Colors.amber;
return Container(
padding: const EdgeInsets.only(
top: 30,
bottom: 10,
left: 20,
right: 20,
),
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
);
}
try this code
class HeaderWiget extends StatelessWidget {
return Container(
width: MediaQuery.of(context).size.width,
height: 100,
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
],
),
);
}
I'm new to flutter and new to programming in general. My problem is I can't add this
child: Align(
alignment: Alignment(0, 48),
child: Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight._(4),
fontSize: 18.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
to this code
class _SetupState extends State<Setup> {
#override
Widget build(BuildContext context) {
return Column(children: [
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Align(
alignment: Alignment.topCenter,
child: Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
),
)),
]);
}
}
I tried adding it to the container, making a new align but I still didn't manage to succeed.
Thanks for the help!!
I made a layout based on the image provided in the comments:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Column(
children: <Widget>[
Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'WORKS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'RESTS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: FlatButton(
color: Colors.greenAccent,
child: Text(
'START',
style: TextStyle(
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.w400
),
),
onPressed: () {
},
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
),
),
],
)
],
),
),
),
),
);
}
I used a Column(let's name it column1) for the whole grey box, and every one of (SETS, +, -), (WORK, +, -), and (RESTS, +, -) is a Column inside the column1. Every (+, -) is a Row wrapped with a Padding. The Padding is used to make the (+, -) become closer to the center of the box.
There are many ways to make such layout, this is only one.
Result:
if that does not work you can first align it the way you want. Then use padding or margin so that you can have it exactly where you want it be.
Container(
padding:
alignment:
child:Text()
)
I am new in flutter , I am sharing an image in which there is card and its border has an image (as you can see the date i.e JULY , 2020 is showing inside an image) . I don't have any idea of how to achieve this functionality . Please help me.
I wrote the below code to create the card. The code is displaying the date image inside the card . Do I need to follow some other widget rather than card and listtile?
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.grey[100],
border: Border.all(
width: 1, //
// <--- border width here
),
);
}
Widget _myListView(BuildContext context) {
return new ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(0.0),
child:
Column(
children: <Widget>[
Container(
decoration: myBoxDecoration(),
height: 180,
child :
Card(
child: Ink(
color: Colors.grey[200],
child : ListTile(
onTap: () {
},
title: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child:
Center(child: Text('JULY , 2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
fontSize: 20,
color: Colors.white
),),),
width: 190.0,
height: 30,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/apply_leave.png"),
fit: BoxFit.fill,
// alignment: Alignment.center,
),
),
),
Container(
child:Text('' , style: TextStyle(
fontWeight: FontWeight.bold ,
fontSize: 20,
color: Colors.black
),)
)
]
),
SizedBox(height: 20.0),
Expanded(
child :
Row(
children: <Widget>[
Text('FEE SCEDULE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 80.0),
Text('JULY-SEPT' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
),
Expanded(
child :
Row(
children: <Widget>[
Text('DUE DATE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('10-06-2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
),
Expanded(
child :
Row(
children: <Widget>[
Text('END DATE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('19-07-2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
)
]
),
),
),
)
),
Container(
child: Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Total Amount:',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
Text('254684'+'/-',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
],
),
),
//
),
)
]
)
);
},
separatorBuilder: (BuildContext context,
int index) => const Divider(),
);
}
If I understand you correctly, you want to put an image above the container with border. You can use Stack for it.
Wrap that container in it and put it at the start of children list, that way it will be displayed below an image, and everything else. Use Positioned to rearrange widgets in stack. You may want to wrap stack in Container to position it better.
Feel free to play with values to get the most desired result:
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.grey[100],
border: Border.all(
width: 1, //
// <--- border width here
),
);
}
Widget _myListView(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Container(
decoration: myBoxDecoration(),
height: 180,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Card(
child: Ink(
color: Colors.green[200],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Text(
'',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.black),
),
),
],
),
SizedBox(height: 20.0),
Expanded(
child: Row(children: <Widget>[
Text('FEE SCEDULE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 80.0),
Text('JULY-SEPT',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
))
])),
Expanded(
child: Row(
children: <Widget>[
Text('DUE DATE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('10-06-2020',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
))
],
),
),
Expanded(
child: Row(
children: <Widget>[
Text('END DATE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text(
'19-07-2020',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
],
),
)
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.topLeft,
child: _buildBorderImage(),
),
)
],
),
),
Container(
child: Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Total Amount:',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
Text(
'254684' + '/-',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
],
),
),
//
),
),
],
),
);
}
Container _buildBorderImage() {
return Container(
child: Center(
child: Text(
'JULY , 2020',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20, color: Colors.white),
),
),
width: 190.0,
height: 30,
decoration: BoxDecoration(
color: Colors.green,
// image: DecorationImage(
// image: AssetImage("assets/images/apply_leave.png"),
// fit: BoxFit.fill,
// alignment: Alignment.center,
// ),
),
);
}