import 'package:flutter/material.dart';
void main() {
runApp(Test());
}
class Test extends StatelessWidget {
#override
Widget build(context) {
return SingleChildScrollView(
child: Column(children: [
Container(
height: 100,
color: Colors.white,
child: const Text("Titleeeee"),
),
Container(
height: 300,
color: Colors.blue,
child: const Text("STICKEEEYYYY"),
),
Container(
height: 100,
color: Colors.orange,
child: const Text("CCCCCCC"),
),
Container(
height: 100,
color: Colors.orange,
child: const Text("CCCCCCC"),
),
]),
);
}
}
I have this Column widget. Trying to make the second container - Text('STICKEEEY') the sticky header. I've been trying to use the sticky_header package.
Container(
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 100,
color: Colors.white,
child: const Text("Titleeeee"),
),
StickyHeader(
header: Container(
height: 300,
color: Colors.blue,
child: const Text("STICKEEEYYYY"),
),
content: Column(children: [
Container(
height: 100,
color: Colors.orange,
child: const Text("CCCCCCC"),
),
Container(
height: 100,
color: Colors.orange,
child: const Text("CCCCCCC"),
),
]),
),
],
),
),
)
However, this does not hold the second container at the top. It bypasses when it scrolls down. How can I make it stick to the top in this case?
Slives maybe are what you are looking for.
Doc: https://docs.flutter.dev/development/ui/advanced/slivers
You can use SilverAppBar
Doc : https://api.flutter.dev/flutter/material/SliverAppBar-class.html
Related
I want that the red container has the same height as the blue container. The problem is, that the height of the blue container changes depending of the amount of lines. It would also help if the red container starts on the same height as blue container. The goal is to have a functional bullet point in the middle of the first line
My code is:
import 'package:flutter/material.dart';
class InhaltGesetz extends StatelessWidget {
final String text;
const InhaltGesetz({
Key? key,
required this.text,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: Container(
height: 70,
color: Colors.red,
child: const Align(
alignment: Alignment(0, -0.99),
child: Text(
'•',
style: TextStyle(fontSize: 25, color: Colors.white),
),
),
),
),
LayoutBuilder(
builder: (context, constraints) {
return Container(
width: 340,
color: Colors.blue,
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.fromLTRB(4, 8, 8, 8),
child: Text(
text,
style: const TextStyle(
fontSize: 15.5,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
);
},
),
],
);
}
}
I do not know what to do I tried to change the height manually with every container but i ended up with 9000+ lines of code and i will not do it any longer
You can use IntrinsicHeight widget(expensive), Follow this structure.
class InhaltGesetz extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [
IntrinsicHeight(
child: Row(
children: [
Container(
width: 200,
color: Colors.red,
child: const Align(
alignment: Alignment(0, -0.99),
child: Text(
'•',
style: TextStyle(fontSize: 25, color: Colors.white),
),
),
),
Container(
width: 340,
height: 200,
color: Colors.blue,
),
],
),
),
],
);
}
}
I want to build a reusable card widget, it will have an image and text with some custom design layout. I tried everything I could, but wasn't able to achieve the desired result. Any help would be much appreciated.
This is what I want to do
I'm stuck here
This is my code
class ReusabelCard extends StatelessWidget {
ReusabelCard(
{this.cardChild, #required this.assetImagePath, #required this.cardText});
final Widget cardChild;
final String assetImagePath;
final String cardText;
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.35,
width: MediaQuery.of(context).size.width * 0.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(MediaQuery.of(context).size.width * 0.5 * 0.28),
),
child: Stack(
children: [
LayoutBuilder(
builder: (context, contraint) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(
Icons.trip_origin,
size: contraint.biggest.width,
color: Colors.grey[300],
),
Container(
height: MediaQuery.of(context).size.height*0.05,
width: MediaQuery.of(context).size.width,
color: Colors.green,
),
],
);
},
),
],
)
);
}
}
Use ClipRRect to do it:
ClipRRect(
borderRadius: BorderRadius.circular(50.0), //clipping the whole widget
child: Container(
height: MediaQuery.of(context).size.height * 0.4, //I adjusted here for responsiveness problems on my device
width: MediaQuery.of(context).size.width * 0.5,
color: Colors.white,
child: LayoutBuilder(
builder: (context, constraint) {
return Stack(
children: [
Center(
child: Icon(
Icons.trip_origin,
size: constraint.biggest.width,
color: Colors.grey[300],
),
),
Positioned(
right: 0,
left: 0,
top: 20.0,
child: Icon(
Icons.sports_volleyball_rounded, //just to represent the ball
size: constraint.biggest.width * 0.5,
),
),
Positioned(
bottom: 0.0,
child: Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height * 0.1,
width: constraint.biggest.width,
color: Colors.yellow[700],
child: Text(
'Sports',
style: Theme.of(context)
.textTheme
.headline3
.copyWith(color: Colors.white),
),
),
),
],
);
},
),
),
);
Can someone help me get this layout with the first circle over the second?
image
I have this function:
Widget overlapped() {
final overlap = 25;
final items = [
Container(
padding: EdgeInsets.only(right: 2),
decoration: new BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: CircleAvatar(
radius: 22,
backgroundImage: AssetImage('assets/example_logo.png'),
backgroundColor: Colors.black,
),
),
CircleAvatar(
radius: 22,
backgroundColor: Colors.white,
child: ClipOval(
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png",
errorBuilder: (context, exception, stackTrace) {
return Container(color: Colors.white);
},
height: 35,
))),
CircleAvatar(
child: Text('+2', style: TextStyle(color: Colors.white)),
backgroundColor: Theme.of(context).canvasColor),
];
List<Widget> stackLayers = List<Widget>.generate(items.length, (index) {
return Container(
padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
child: items[index],
);
});
return Stack(children: stackLayers);
}
This function whenever I add an item to the array, it adds a widget on the right. But I want the first to be above the second, the second of the third, etc ...
you could use the Stack widget :
Stack(
children:<Widget>:[
Positioned(
right: 130.0,
child:Container(
shape: BoxShape.circle,
)
),
Positioned(
left: 130.0,
child:Container(
shape: BoxShape.circle,
)
),
]
)
Use Stack and Positioned together.
import 'package:flutter/material.dart';
class OverLap extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Overlap'),
),
body: Container(
padding: const EdgeInsets.all(8.0),
width: 500.0,
child: Stack(
children: <Widget>[
//Change according to your icon
Icon(
Icons.flaky,
size: 50.0,
color: Colors.red,
),
Positioned(
left: 20.0,
//Change according to your icon
child: Icon(
Icons.flaky,
size: 50.0,
color: Colors.blue,
),
),
],
),
),
);
}
}
I am creating the tutorial screen in which the two views like:- one is should be in the center of the screen and another should at the bottom of the screen.
But my both view is not proper, please check the below images.
I have done some lines of the code to do it but the not getting the proper solution, please check below code once
import 'package:flutter/material.dart';
import 'package:page_indicator/page_indicator.dart';
import 'login_screen.dart';
class Tutorial extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _TutorialScreen();
}
}
class _TutorialScreen extends State<Tutorial> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Align(
alignment: Alignment.center,
child:Column(
children: <Widget>[
Container(
height: 250.0,
margin: EdgeInsets.only(left: 10.0,top: 40.0,right: 10.0),
child: PageIndicatorContainer(
pageView: PageView(
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.yellow,
),
Container(
color: Colors.blueAccent,
)
],
),
length: 3,
align: IndicatorAlign.bottom,
indicatorSpace: 5.0,
padding: EdgeInsets.all(10.0),
),
),
Container(
height: 80.0,
color: Colors.purple,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: OutlineButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => LoginScreen()));
},
textColor: Colors.white,
child: Text(
"Login",
style: TextStyle(color: Colors.white),
),
),
),
Container(
margin: EdgeInsets.only(left: 10.0),
child: RaisedButton(
onPressed: () {},
color: Colors.black54,
child:
Text("SignUp", style: TextStyle(color: Colors.white)),
),
),
],
),
)
],
)
),
);
}
}
Please check above code once and let me know once.
Use this to get required view
Stack(children: <Widget>[
Align(alignment: Alignment.center,
child: Container(width: 100, height: 100, color: Colors.redAccent,),),
Align(alignment: Alignment.bottomCenter,
child: Container(height: 100, color: Colors.purpleAccent,),)
],)
Put the bottom Container inside Align widget and use alignment: Alignment.bottomCenter .:
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 80.0,
color: Colors.purple,
child: Row(
... .... ... // other code
Thanks #Zulfiqar But It is not necessary to put the whole view inside the Stack widget and use the Align property with it.
We can also use the Expanded or flexible widget to come out from the problem.
We can also use the MediaQuery for it like below
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:page_indicator/page_indicator.dart';
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Material(
child:Align(
alignment: Alignment.center,
child:Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height*0.90, /////HERE I USED MEDIAQUERY FOR IT
child: PageIndicatorContainer(
child: PageView(
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.yellow,
),
Container(
color: Colors.blueAccent,
)
],
),
length: 3,
align: IndicatorAlign.bottom,
indicatorSpace: 5.0,
padding: EdgeInsets.all(10.0),
),
),
Container(
height: MediaQuery.of(context).size.height*0.10, ////HERE I USED MEDIAQUERY FOR IT
color: Colors.purple,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: OutlineButton(
onPressed: () {
},
textColor: Colors.white,
child: Text(
"Login",
style: TextStyle(color: Colors.white),
),
),
),
Container(
margin: EdgeInsets.only(left: 10.0),
child: RaisedButton(
onPressed: () {},
color: Colors.black54,
child:
Text("SignUp", style: TextStyle(color: Colors.white)),
),
),
],
),
)
],
)
),
);
}
}
And for the pageView i have used this library page_indicator: ^0.3.0
And output from above code is as follow
I have a problem with banner widget. To demonstrate it I have made some demonstration code. What I want is to have a banner in the top right corner of a container, but it is ugly, as it overflows its child (pls. see the attached image).
Here is my code:
class TestPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Banner(
message: "hello",
location: BannerLocation.topEnd,
color: Colors.red,
child: Container(
margin: const EdgeInsets.all(10.0),
color: Colors.yellow,
height: 100,
child: Center(child: Text("Hello, banner!"),),
),
),
),
);
}
}
I tried to play with the margin, but I still have this behavior even if margin set to 0.
How can avoid this 'banner overflow'?
Thanks a lot!
Just adding ClipRect to Op's code
return Scaffold(
body: Center(
child: ClipRect(
child: Banner(
message: "hello",
location: BannerLocation.topEnd,
color: Colors.red,
child: Container(
margin: const EdgeInsets.all(10.0),
color: Colors.yellow,
height: 100,
child: Center(child: Text("Hello, banner!"),),
),
),
),
),
);
Inverting the container and the banner
return Scaffold(
body: Center(
child: Container(
margin: const EdgeInsets.all(10.0),
height: 100,
color: Colors.yellow,
child: Banner(
message: "hello",
location: BannerLocation.topEnd,
color: Colors.red,
child: Container(
child: Center(child: Text("Hello, banner!"),),
),
),
),
),
Adding ClipRect to inverting Container and Banner
return Scaffold(
body: Center(
child: ClipRect(
child: Container(
margin: const EdgeInsets.all(10.0),
height: 100,
color: Colors.yellow,
child: Banner(
message: "hello",
location: BannerLocation.topEnd,
color: Colors.red,
child: Container(
child: Center(child: Text("Hello, banner!"),),
),
),
),
),
),
);
https://docs.flutter.io/flutter/widgets/ClipRect-class.html
Since you took the time and posted both sample code and an image, I decided to return the favor.
Wrap your Banner inside ClipRect widget and remove the margin :
ClipRect(
child: Banner(
message: "hello",
location: BannerLocation.topEnd,
color: Colors.red,
child: Container(
color: Colors.yellow,
height: 100,
child: Center(
child: Text("Hello, banner!"),
),
),
),
),
Consider swapping the Banner and its child, Container. In your code, the banner is placed on the container. Instead, place it on the card. It should look like this
Scaffold(
body: Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Colors.yellow,
height: 100,
child: Banner(
message: "hello",
location: BannerLocation.topEnd,
color: Colors.red,
child: Center(child: Text("Hello, banner!"),),
),
),
),
);