I was working with Flutter and saw this:
a grey line appeared on my screen.
maybe it is because the appbar is moved down by, for example, 5px and the background color is set to grey?
BTW on iPhones, it works perfect, no lines
Container(
if I delete width but uncomment height it works but it sets a width of background around 200px I need double.infiniti
If I run the code it sets width to device.width but make the grey line visible
// height: device.height * 390 / 812,
width: double.infinity,
child: BuildSvg('assets/svg/backgroundGradient.svg'),
),
buildsvg
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class BuildSvg extends StatelessWidget {
final url;
BuildSvg(this.url);
#override
Widget build(BuildContext context) {
final String assetName = url;
final Widget svg = new SvgPicture.asset(assetName, semanticsLabel: '');
return svg
}
}
I change bgckcolor to red
This might help you :
you can change the color of the status bar from scaffold so it can be transparent
import 'package:flutter/services.dart';
class WelcomeScreen extends StatefulWidget {
#override
_WelcomeScreenState createState() => _WelcomeScreenState();
}
class _WelcomeScreenState extends State<WelcomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),
elevation: 0,
backgroundColor: Colors.transparent,
),
)
}
Related
I need to calculate the height of a child widget before its parent renders.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Material App',
home: Scaffold(
appBar: CustomAppbar(
widget: Text(
'This is a tex',
),
),
),
);
}
}
The above code just call a Widget CustomAppbar, which receives as parameter a TEXT widget
class CustomAppbar extends StatelessWidget implements PreferredSizeWidget {
final Widget? widget;
const CustomAppbar({
Key? key,
this.widget,
}) : super(key: key);
#override
Size get preferredSize => const Size.fromHeight(130.0);
#override
Widget build(BuildContext context) {
return ClipPath(
clipper: HeaderCustomClipper(),
child: ColoredBox(
color: Color.fromRGBO(255, 191, 14, 1),
child: Column(
children: [
_AppBar(),
if (widget != null) widget as Widget,
],
),
),
);
}
}
The above code just is a customAppbar, I want the height of the child widget (widget) to be captured before the CustomAppbar renders.
If I pass a text, it should be seen like that:
If I don't pass anything, it should be seen like that:
to achieve that you can use GlobalKey -> BuildContext -> RenderBox -> widget-> global position & rendered size.
please check this below link
https://stackoverflow.com/a/49650741/17180860
My Flutter desktop web app has complex ui that would be too tricky to make responsive. So instead I want to put it in a FittedBox that will simply shrink the whole app if the user makes the browser window smaller.
class CustomPage extends StatelessWidget {
final Widget child;
const CustomPage({
Key? key,
required this.child,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: GetPlatform.isDesktop
? FittedBox(
child: SizedBox(
width: Get.width,
height: Get.height,
child: Center(child: child),
),
)
: Text('Sorry! This was only meant for desktop.'),
);
}
}
But Get.width and WidgetsBinding.instance.window.physicalSize.width only get the initial window size. So if the app is started in a full screen browser then this works great, but if the app is started in a small browser it doesn't work. MediaQuery.of(context).size.width only gets the current screen size.
Is there a way of getting a desktop physical screen size?
you need to import
import 'dart:html';
then window.screen?.width and window.screen?.height
will give you physycal screen size
import 'dart:html';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) => MaterialApp(debugShowCheckedModeBanner: false, home: Home());
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: LayoutBuilder(builder: (context, c) {
return Center(
child: Text('${window.screen?.width} ${window.screen?.height}'),
);
}),
);
}
}
Hi Im having problem with clippath, Im trying to do a clippath like in the inserted image link [https://imgur.com/qDspPgV]. However, I realised I cant actually do this in flutter because appbar is block the way so it gives me a white space.
Is there a way where I could overlap it?
This is my code
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent));
runApp(LoginUI());
}
class LoginUI extends StatefulWidget {
#override
_LoginUIState createState() => _LoginUIState();
}
class _LoginUIState extends State<LoginUI> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Login"),
),
body: SafeArea(child: Builder(builder: (BuildContext context) {
return Container(
color: Colors.white,
child: ClipPath(
clipper: MyClipper(),
child: Container(
color: Colors.red,
)));
})),
));
}
}
class MyClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = new Path();
path.lineTo(0, size.height * .5);
path.lineTo(size.width, 0);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}
This is my design output because of appbar
[https://imgur.com/UaKFvBO]
the clippath on the design is a placeholder. I havent decided to change it yet until I actually manage to overlap the appbar.
Edit: suggestion upon without appbar [https://imgur.com/93O1kX7], it doesnt go thoroughly on the status bar.
Edit: Thanks Albert [ https://imgur.com/5QsztCr ].
You can achieve what you want just by omitting the appBar Scaffold parameter and passing this clipped container at the top of a Column that you would have in your Scaffold's body.
Also remember that SafeArea paddings out from the status bar among other things.
In my app when button clicked, I want statusBar to be absolutely hidden.
I've already tried SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); and SystemChrome.setEnabledSystemUIOverlays([]);
it makes statusBar black but it still takes space on top of the screen.
So how can I make statusBar disappear fully when I click specific button?
In Flutter 2.5, you would do this using the following snippet:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
You can use any of the following SystemUiMode enums:
immersive
immersiveSticky
edgeToEdge
leanBack
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); works fine, the remaining space you are seeing is just the AppBar. You can change the size of the AppBar at the same time you hide the status bar, by wrapping it in a PreferredSize widget and setting the size property to a variable that you change with setState when the button is pressed.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double appBarHeight = 55;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(appBarHeight),
child: AppBar(
title: const Text('Hide Status Bar'),
),
),
body: Scaffold(
body: Center(
child: RaisedButton(
onPressed: () {
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
setState(() {
appBarHeight = 35; // After status bar hidden, make AppBar height smaller
});
},
child: Text("Hide Bar"),
),
),
),
),
);
}
}
EDIT: TO HIDE STATUS BAR, NAV BAR, AND THEIR RESERVED SPACES
To hide both status bar, navigation bar, and the spaces that are reserved for them like this:
You can get rid of both using SystemChrome.setEnabledSystemUIOverlays([]);, then set your AppBar to null using a bool and setState, and set the resizeToAvoidBottomInset property of your scaffold to false.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool showAppBar = true;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
resizeToAvoidBottomInset: false,
appBar: appBar(),
body: Center(
child: RaisedButton(
onPressed: () {
SystemChrome.setEnabledSystemUIOverlays([]);
setState(() {
showAppBar = false;
});
},
child: Text("Hide Bar"),
),
),
),
);
}
appBar() {
if (showAppBar) {
return AppBar(
title: const Text('Hide Status Bar'),
);
} else {
return null;
}
}
}
For example I have a Widget in the first.dart file and another widget in the second.dart file. The first widget is a simple Button and the second Widget includes a Container with the color red. How can I change the color of this container when I tap the button?
If both widgets are in one file it would be of course very simple, just call the setState() method. But as I said each widget is on a separate file.
What I've tried? Honestly, nothing much. I'm not sure if this is even possible. My first idea was to use something like ValueListenable but the result was not really great.
First, you need to create a new dart file with a stateless widget, set it to receive arguments with final _color and ColoredContainer(this._color) as shown:
import 'package:flutter/material.dart';
class ColoredContainer extends StatelessWidget {
final _color;
ColoredContainer(this._color);
#override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: _color,
);
}
}
Then in the main.dart file, import the dart file and use ColoredContainer as a widget which you can pass the Colors to it, in my case I passed a different Color from a list of colors every time setState is called:
import 'package:flutter/material.dart';
import 'ColoredContainer.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int index = 0;
final List<Color> _colorList = [
Colors.red,
Colors.green,
Colors.blue,
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
RaisedButton(onPressed: (){
setState(() {
index += 1;
});
}, child: Text('Tap me')),
ColoredContainer(_colorList[index]),
],
),
),
);
}
}