Related
Basically I'm new to Flutter and trying to make a design like this -
So I Tried Stack for this but couldn't make it perfect.
Here is my code and image
Stack(
children: [
Positioned(
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.yellow,
),
),
),
Positioned(
child: Container(
height: 250,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.red,
),
),
top: 10,
left: 5,
right: 5,
),
],),
You will need to give proper positione to each and every Positioned widget.
This code will provide you output which you expact.
You can checkout interactive code here.
Stack(
children: [
Positioned(
left: 125,
top: 50,
child: Container(
height: 250,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.black,
),
),
),
Positioned(
left: 100,
top: 60,
child: Container(
height: 300,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.red,
),
),
),
Positioned(
left: 75,
top: 75,
child: Container(
height: 350,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.yellow,
),
),
),
],
)
Please update your code with the below code. Here, I have fix the height only as device wise width could be changed. I have used Align widget to position the widget to bottom.
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 90),
height: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
color: Colors.greenAccent,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 50),
height: 140,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
color: Colors.orange,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
color: Colors.limeAccent,
boxShadow: [
BoxShadow(
color: Colors.yellow,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 5.0,
),
],
),
),
),
],)
It will look like this,
Rather then achieve it with Stack widget you can try this with Column widget like below
Column(
children: [
Container(
height: 20,
width: MediaQuery.of(context).size.width - 150,
decoration: BoxDecoration(/*as-per-your-requirement*/),
),
Container(
height: 20,
width: MediaQuery.of(context).size.width - 100,
decoration: BoxDecoration(/*as-per-your-requirement*/),
),
Container(
///this will be your main layout that user can completely see
width: MediaQuery.of(context).size.width - 50,
decoration: BoxDecoration(/*as-per-your-requirement*/),
child: /*as-per-your-requirement*/,
),
],
)
Stack(
children: [
Positioned(
top: -52.h,
left: -22.w,
child: Text(
"$position",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 200.sp,
color: Color(0x2007B4CF)),
)),
Positioned(
child: SvgPicture.asset(Res.ic_plan_lock),
top: 20.h,
right: 20.w,
),
Positioned(
top: 46.h,
left: 13.w,
right: 13.w,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(Res.ic_plan_secured),
SizedBox(
height: 10.h,
),
Text(
offer.offerName,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14.sp,
color: ColorUtil.of(context).primaryDark),
),
SizedBox(
height: 12.h,
),
Text(
offer.offerText,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14.sp,
color: Colors.black),
),
],
),
),
Positioned(
bottom: 20.h,
left: 20.h,
right: 20.h,
child: GestureDetector(
behavior: getDefaultGestureDetectorBehaviour(),
onTap: () {
onCtaClicked();
},
child: Container(
height: 31.h,
width: 159.w,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xFF2D2D3D),
borderRadius: BorderRadius.circular(10.h)),
child: Text(
offer.route,
style: TextStyle(
color: ColorUtil.of(context).colorPrimaryLight,
fontSize: 14.sp,
fontWeight: FontWeight.w500),
),
),
))
],
),
How do I make an icon rest on the bottom of a container, just like in the picture. So that even when I scroll the page and the container moves. The icon moves with it in that particular position.
The icon in this page is the empty profile icon resting on the container with the exes image. I don't want my container to have an image though.
Just color image of the container and round icon.
Image of the container and icon even when scrolled.
NOTE. I don't want the container to be the app bar. Just a container on its own under the app bar. I'm only showing this picture so u can see what I'm talking about.
did you try this
Align(
alignment: Alignment.topCenter,)
Did you want it like this :
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 300,
color: Colors.cyan[900],
),
Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.topCenter,
children: [
Container(
width: double.infinity,
color: Colors.grey[900],
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 150, // +50 below circle Container
),
const Text(
'Happiness',
style: TextStyle(color: Colors.white, fontSize: 32),
),
const SizedBox(
height: 30,
),
Container(
height: 200,
width: 300,
color: Colors.amber[900],
),
const SizedBox(
height: 30,
),
Container(
height: 200,
width: 300,
color: Colors.red[900],
),
],
),
),
Positioned(
top: -100,
child: Container(
height: 200,
width: 200,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
'assets/images/cyanide.png',
)),
color: Colors.deepPurple,
),
),
),
],
),
],
),
),
may be what you need is to use CustomScrollView and SilverAppBar with bottom:
here is the reference: example
plus transform
I'm very new at coding with flutter and looking for help on something I am doing for school. My issue is that our instructor wants us to have padding on each side of our columns (10px) while also keeping our containers 1,2,3,4,5,6 width & height to 100px. What I am wondering is if there is anyway that I can resize my containers to fit inside my view without changing their width and height specified. This is the code I have and am open to any help I can get.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App01 Lucas Holmes',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
// This makes the visual density adapt to the platform that you run
// the app on. For desktop platforms, the controls will be smaller and
// closer together (more dense) than on mobile platforms.
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Row and Column Widgets'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.blueGrey,
body: Container(
child: Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: [
Container(
height: 100,
width: 100,
child: Center(
child: Text("Container 1",
textAlign: TextAlign.center)),
decoration: BoxDecoration(
color: Colors.orange,
border: Border.all(color: Colors.black, width: 3)),
),
Transform.rotate(
angle: .8,
child: Container(
height: 100,
width: 100,
child: Center(
child: Text("Container 2",
textAlign: TextAlign.center)),
color: Colors.white,
)),
],
)),
Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: [
new Expanded(
child: Container(
height: 100,
width: 100,
child: new Align(
alignment: Alignment.bottomCenter,
child: Text("Container 3",
textAlign: TextAlign.center)),
color: Colors.yellow,
margin:
const EdgeInsets.only(top: 10, bottom: 10))),
new Expanded(
child: Container(
height: 100,
width: 100,
child: new Align(
alignment: Alignment.centerRight,
child: Text("Container 4")),
color: Colors.lightBlue,
margin:
const EdgeInsets.only(bottom: 10, top: 10)))
],
)),
Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(children: [
Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 140),
child: Center(
child: Text("Container 5",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white))),
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.white, width: 3),
borderRadius: BorderRadius.circular(100)),
),
new Expanded(
child: Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 160, right: 0, left: 0),
child: Text(
"Con 6",
style: TextStyle(fontSize: 30),
textAlign: TextAlign.start,
),
color: Colors.red,
))
]))
],
),
)));
}
}
This is what it is supposed to look like
This is the issue I'm running into
I was trying to see if I could get flexible to work but I wasn't able to get it to work properly. Sorry if my code is awful. I just started today lol. Our teacher said it is okay for us to get help from outside resources. So I'm just looking to be pointed in the right direction in how to solving this issue. So close to done this was the only issue I ran into. Any help would be great. Thanks :)
You can also wrap Expanded widget to Row's children like this
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.blueGrey,
body: Container(
child: Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Row(
children: [
Expanded(child: Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: [
Container(
height: 100,
width: 100,
child: Center(
child: Text("Container 1",
textAlign: TextAlign.center)),
decoration: BoxDecoration(
color: Colors.orange,
border: Border.all(color: Colors.black, width: 3)),
),
Transform.rotate(
angle: .8,
child: Container(
height: 100,
width: 100,
child: Center(
child: Text("Container 2",
textAlign: TextAlign.center)),
color: Colors.white,
)),
],
))),
Expanded(child:Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: [
Container(
height: 100,
width: 100,
child: new Align(
alignment: Alignment.bottomCenter,
child: Text("Container 3",
textAlign: TextAlign.center)),
color: Colors.yellow,
margin:
const EdgeInsets.only(top: 10, bottom: 10)),
Container(
height: 100,
width: 100,
child: new Align(
alignment: Alignment.centerRight,
child: Text("Container 4")),
color: Colors.lightBlue,
margin:
const EdgeInsets.only(bottom: 10, top: 10))
],
))),
Expanded(child:Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(children: [
Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 140),
child: Center(
child: Text("Container 5",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white))),
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.white, width: 3),
borderRadius: BorderRadius.circular(100)),
),
Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 160, right: 0, left: 0),
child: Text(
"Con 6",
style: TextStyle(fontSize: 30),
textAlign: TextAlign.start,
),
color: Colors.red,
)
])))
],
),
)));
}
}
you can wrap your container with SingleChildScrollView and set scrollDirection to Axis.horizontal like code below.
Remember because we have different screen sizes you should avoid to set constant value for width and height.
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.blueGrey,
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
child: Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: [
Container(
height: 100,
width: 100,
child: Center(
child: Text("Container 1",
textAlign: TextAlign.center)),
decoration: BoxDecoration(
color: Colors.orange,
border:
Border.all(color: Colors.black, width: 3)),
),
Transform.rotate(
angle: .8,
child: Container(
height: 100,
width: 100,
child: Center(
child: Text("Container 2",
textAlign: TextAlign.center)),
color: Colors.white,
)),
],
)),
Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: [
Expanded(
child: Container(
height: 100,
width: 100,
child: Align(
alignment: Alignment.bottomCenter,
child: Text("Container 3",
textAlign: TextAlign.center)),
color: Colors.yellow,
margin: const EdgeInsets.only(
top: 10, bottom: 10))),
Expanded(
child: Container(
height: 100,
width: 100,
child: Align(
alignment: Alignment.centerRight,
child: Text("Container 4")),
color: Colors.lightBlue,
margin:
const EdgeInsets.only(bottom: 10, top: 10)))
],
)),
Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(children: [
Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 140),
child: Center(
child: Text("Container 5",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white))),
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.white, width: 3),
borderRadius: BorderRadius.circular(100)),
),
Expanded(
child: Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 160, right: 0, left: 0),
child: Text(
"Con 6",
style: TextStyle(fontSize: 30),
textAlign: TextAlign.start,
),
color: Colors.red,
))
]))
],
),
)),
));
I'm coding a layout like homepage from Linkedin, Twitter, etc (example here) with Flutter for Web, but the Profile Tab it's not fixing on top of layout. I need something like gravity property (Android), I tried usign Align class, CrossAxisAlignment, MainAxisAlignment but it didn't work. Also I tried to set a margin/padding subtracting the height of the context with container, but it didn't work either
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: EdgeInsets.only(top: 30, left: 50, right: 50),
child: Row(children: [
Expanded(
flex: 1,
child: Column(
children: [
Container(
margin: EdgeInsets.only(right: 50),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Center(child: Text('Trend Stories')))
],
),
),
Expanded(
flex: 2,
child: Column(
children: [
Container(
margin: EdgeInsets.only(right: 50),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
height: MediaQuery.of(context).size.height,
child: Center(child: Text('Trend Stories')))
],
),
),
Expanded(
flex: 1,
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
height: MediaQuery.of(context).size.height,
child: Center(child: Text('Trend Stories')))
],
),
),
])));
code
I want to find out why border radius wouldn't apply top half of the widget on Android.
Here is the image on Android
However on the web, it's working like image below.
Does anyone know why?
Code
Center(
child: Card(
elevation: 1.5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 60.0,
color: Colors.pink[200].withOpacity(0.95),
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),
If you observe carefully by changing the opacity of the color for time being to:
color: Colors.pink[200].withOpacity(0.2),
You'll see that the top left and top right corners are cut-off and not filled by the color:
In order to avoid this, use Card widget's clipBehavior: Clip.antiAlias, property that covers all corners of the card with the given color. Here's the updated result:
Hope this answers your question.
You can try the following:
Center(
child:
Card(
elevation: 1.5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: new Radius.circular(16.0)
),
color: Colors.pink[200].withOpacity(0.95),
),
width: double.infinity,
height: 60.0,
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),
Note that the color was moved inside the BoxDecoration as it will fail to compile otherwise.
I kept the shape attribute so that the lower part of the card will be rounded as well. You could tinker with that and remove it, if necessary.
Edit: In your case like #Darshan mentioned you can just set clipBehavior: Clip.antiAlias in Card widget.
You can use also use ClipRRect to force the child to have the given border radius, if you don't have clipBehavior.
Center(
child: Card(
elevation: 1.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 60.0,
color: Colors.pink[200].withOpacity(0.95),
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),
)