I am trying to leave a container fixed and the other part of the screen that can do some scrolling is there a possibility to replicate not the screen, only these two events?
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Container(
child: Column(
children: <Widget>[
Container(
height: 200,
width: double.infinity,
color: Colors.red,
),
SingleChildScrollView(
child: Container(color: Colors.blue,height: 1000,width: double.infinity,))
/* body(context, screenWidth, screenHeight),
bottmtop(context), */
],
),
),
);
You can use this exmaple as it.
If You want to user list than use SliverList in place of SliverFillRemaining;
class HeadState extends State<Head> {
#override
Widget build(BuildContext context) {
var screenHeight = MediaQuery.of(context).size.height;
var screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
bottomNavigationBar: BottomNavigationBar(items: []),
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: screenHeight / 4,
flexibleSpace: Container(
color: Colors.red,
),
),
SliverFillRemaining(
child: Container(
height: screenHeight - screenHeight / 4,
color: Colors.blue,
),
)
],
),
);
}
}
Related
I'm overlaying my SystemUiMode, the code is below:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
I need this SystemUiMode.
Well i have widgets within a SingleChildScrollView (a form let's say). When the keyboard shows up and my content inside the ScrollView is big enough to fill all the available space it hits the top margin of the screen. I wanted a design where my SingleChildScroview had a top padding of the same size of the status bar.
I tried:
To use SafeArea: but it doesn't work, in a first moment my widget fill the entire available space ignoring the status bar height, then it flickers between the expected layout and then goes to filled again. Below is the code:
class Test extends StatelessWidget {
const Test({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
return SafeArea(
child: Scaffold(
backgroundColor: Colors.green,
body: Center(
child: SingleChildScrollView(
child: Center(
child: Container(
width: size.width * .8,
height: size.height * .9,
color: Colors.red,
child: Center(child: TextField()),
),
),
),
),
),
);
}
}
I tried to listen to the changes of the MediaQuery and store the value of the height, but when the keyboard shows up for the first time (sometimes in a second too) it fills the entire space available.
static double topPadding = 0;
setTopPadding(double newPad) {
if (newPad > topPadding) topPadding = newPad;
}
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
setTopPadding(MediaQuery.of(context).viewPadding.top);
return Scaffold(
backgroundColor: Colors.green,
body: Center(
child: Padding(
padding: EdgeInsets.only(top: topPadding),
child: SingleChildScrollView(
child: Center(
child: Container(
width: size.width * .8,
height: size.height * .9,
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("A"),
TextField(),
Text("B"),
TextField(),
],
)),
),
),
),
),
);
}
What's the way to get the static height of the status bar?
you can the give Colors.transparent to statusBarColor of the systemOverlayStyle
that makes the statusBar disappear
better to use CustomScrollView Widget instead of SingleChildScrollView...
CustomScrollView(
physics: const BouncingScrollPhysics(), slivers: [
SliverAppBar(
systemOverlayStyle:
const SystemUiOverlayStyle(statusBarColor: Colors.transparent ),
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: 'hello',
background: NetworkImage(imageUrl: networkImage),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30))),
padding: const EdgeInsets.symmetric(horizontal: 14.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: getScreenHeight(10)),
Text(
name,
maxLines: 1,
style: Theme.of(context).textTheme.subtitle1,
textAlign: TextAlign.start,
),]
),)
]);
),
),
},
In the picture below, I tried using the SizedBox Widget and I set the height:
SizedBox(
height: MediaQuery.of(context).size.height / 5.9,
),
The second solution is I try to use LayoutBuilder widget and builder and I specify the height: constraints.maxHeight * 0.4 but I'm getting the same result.
Here's the code:
body: SingleChildScrollView(
child: Column(
children: [
Stack(
children: <Widget>[
_buildCoverImage(screenSize),
SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
SizedBox(height:MediaQuery.of(context).size.height / 5.9),
_buildProfileImage(),
_buildFullName(context),
_buildStatContainer(context),
]
),
),
),
],
),
],
),
),
);
output
Hope you want something like this, while using LayoutBuilder use it at top level of widget tree.
example code
import 'package:flutter/material.dart';
class BackSide extends StatelessWidget {
const BackSide({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => SizedBox(
height: constraints.maxHeight,
width: constraints.maxWidth,
child: Stack(
fit: StackFit.expand,
alignment: Alignment.topCenter,
children: <Widget>[
// _buildCoverImage(screenSize),
Container(
height: constraints.maxHeight,
width: constraints.maxWidth,
color: Colors.amberAccent,
child: Text("Background"),
),
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: constraints.maxHeight * .4,
),
...List.generate(
15,
(index) => Container(
height: 100,
width: double.infinity,
color: index % 2 == 0
? Colors.pinkAccent
: Colors.cyanAccent,
child: Text("item $index"),
)).toList(),
// _buildProfileImage(),
// _buildFullName(context),
// _buildStatContainer(context),
],
),
)
],
),
),
),
);
}
}
I am trying to achieve scroll in Flutter Web where I have few containers which are stacked and I use SingleChildScrollView to scroll the widget. However, when I scroll the first container everything working fine but the second one which is a child of the second container responds to the scroll without completing the initial one. And also is there a way to make a sticky header for the second container. How can I make the 3rd container(orange) to scroll after the 2nd(blue) one is finished scrolling? Here is what I am trying to achieve:
https://yobithemes.com/demo/html/freda/dark-video-index.html
And here what I got so far:
class MainScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
IntroScreen(),
SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height - 100,
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
),
Container(
padding: EdgeInsets.only(top: 100),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.orange,
),
],
),
),
),
],
),
),
),
],
),
);
}
}
You can achieve it by using sliver.
SliverToBoxAdapter fill the transparent area with screen height - app bar height.
SliverAppBar: make it sticky by setting floating and pin to true
class MainScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
IntroScreen(),
CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: MediaQuery.of(context).size.height - 50,
),
),
SliverAppBar(
// toolbarHeight: 50,
floating: true,
pinned: true,
title: Container(
child: Center(child: Text('Header')),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
height: MediaQuery.of(context).size.height-50,
color: Colors.primaries[index % Colors.primaries.length],
),
),
),
],
),
],
),
);
}
}
I have a code that contains a column, and in the column there are 3 widgets, a widget container that has a height of 200 and a width of 200 in red, and the second widget contains a container with a child a transform scale that contains an image that I want to scale, and widget 3 contains the same as the first widget, every time I scale the image, what happens to the second container is always past the first container but does not occur with continaer to 3, if in css I will definitely use zindex, is there some kind of flutter zindex
this is the code
SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Container(
height: 300,
color: Colors.red,
),
Container(
// height: 397,
child: Transform.scale(
scale: 2.0,
child: Container(
width: MediaQuery.of(context).size.width,
child: Image(
image: NetworkImage(
"https://s3-ap-southeast-1.amazonaws.com//kriyapeople/8fa208d6-1486-4028-bd23-243581b4d3a7"),
fit: BoxFit.fitWidth,
),
),
),
),
Container(
height: 300,
color: Colors.red,
),
],
)));
and the result of that code
Use Stack widget,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
_buildHeader(),
for (final i in List.generate(20, (i) => i))
ListTile(title: Text("Tile $i")),
],
),
);
}
_buildHeader() {
double height = 250;
return SizedBox(
height: height,
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
color: Colors.red,
height: height * 2 / 3,
),
Container(
color: Colors.grey[200],
height: height / 3,
),
],
),
Align(
alignment: Alignment.bottomCenter,
child: Image(
image: NetworkImage(
"https://s3-ap-southeast-1.amazonaws.com//kriyapeople/8fa208d6-1486-4028-bd23-243581b4d3a7"),
height: height * 2/3,
width: height * 2/3,
fit: BoxFit.cover,
),
),
],
),
);
}
}
In flutter, is it possible to place a part of a card on another container? In CSS, we would set margin-top to a negative value or use translate property. In flutter as we cannot set negative values to margin-top, is there an alternative to that?
Yes, you can acheive it with a Stack widget. You can stack a card over the background and provide a top or bottom padding.
A simple example would look like:
class StackDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Stack(
children: <Widget>[
// The containers in the background
new Column(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height * .65,
color: Colors.blue,
),
new Container(
height: MediaQuery.of(context).size.height * .35,
color: Colors.white,
)
],
),
// The card widget with top padding,
// incase if you wanted bottom padding to work,
// set the `alignment` of container to Alignment.bottomCenter
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .58,
right: 20.0,
left: 20.0),
child: new Container(
height: 200.0,
width: MediaQuery.of(context).size.width,
child: new Card(
color: Colors.white,
elevation: 4.0,
),
),
)
],
);
}
}
The output of the above code would look something like:
Hope this helps!
Screenshot:
Instead of hardcoding Positioned or Container, you should use Align.
Code:
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
body: Stack(
children: [
Column(
children: [
Expanded(flex: 2, child: Container(color: Colors.indigo)),
Expanded(child: Container(color: Colors.white)),
],
),
Align(
alignment: Alignment(0, 0.5),
child: Container(
width: size.width * 0.9,
height: size.height * 0.4,
child: Card(
elevation: 12,
child: Center(child: Text('CARD', style: Theme.of(context).textTheme.headline2)),
),
),
),
],
),
);
}
Here is running example with overlay:
class _MyHomePageState extends State<MyHomePage> {
double _width = 0.0;
double _height = 0.0;
#override
Widget build(BuildContext context) {
_width = MediaQuery.of(context).size.width;
_height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: <Widget>[
// The containers in the background and scrollable
getScrollableBody(),
// This container will work as Overlay
getOverlayWidget()
],
),
);
}
Widget getOverlayWidget() {
return new Container(
alignment: Alignment.bottomCenter,
child: new Container(
height: 100.0,
width: _width,
color: Colors.cyan.withOpacity(0.4),
),
);
}
Widget getScrollableBody() {
return SingleChildScrollView(
child: new Column(
children: <Widget>[
new Container(
height: _height * .65,
color: Colors.yellow,
),
new Container(
height: _height * .65,
color: Colors.brown,
),
new Container(
margin: EdgeInsets.only(bottom: 100.0),
height: _height * .65,
color: Colors.orange,
),
],
),
);
}
}
Here is Result of code:
Scrollable Body under customised Bottom Bar