I am trying to get bottom system navigation like the image below:
I've tried with AnnotatedRegion but not working. When I try to make it transparent it gets like this:
I am not able to use the area on system navigator bar. How can I use the restricted area? I have a background image, I want to have the image also cover the bottom restricted area. Thanks
Found the answer from this GitHub discussion.
In android/app/build.gradle
dependencies {
implementation 'androidx.core:core-ktx:1.5.0-beta01'
}
In android/app/src/main/kotlin/com/example/edge2edge/MainActivity.kt
package com.example.edge2edge
import androidx.core.view.WindowCompat
import io.flutter.embedding.android.FlutterActivity
class MainActivity: FlutterActivity() {
override fun onPostResume() {
super.onPostResume()
WindowCompat.setDecorFitsSystemWindows(window, false).
}
}
In main.dart
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.transparent,
));
runApp(MyApp());
}
This is probably because your current widget is wrapped inside a (or equivalent) SafeArea widget!
I do think that widgets such as Scaffold have that kind of behaviour.
So if you just used a Container instead of a Scaffold, you would probably be able to draw in this area.
I used to remove all my widgets and just add a Container(align: Alignment.center, color: Colors.red) and see if it could reach the area or not. Moving this red container in the widget tree will give you hints about which widget causes the issue.
Related
When using Gestures for Navigation, how can I change the background color of the area beneath bottom Navigation.
Okay, so after a lot of fiddling, I have arrived at this answer.
We need to wrap the material app/scaffold with AnnotatedRegion.
So I have changed my main.dart in the following way:
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.transparent, //top status bar
systemNavigationBarColor: Colors.black, // navigation bar color, the one Im looking for
statusBarIconBrightness: Brightness.dark, // status bar icons' color
systemNavigationBarIconBrightness:
Brightness.dark, //navigation bar icons' color
),
child: MaterialApp(
debugShowCheckedModeBanner: false,
And this worked smoothly with a rebuild.
Hope this helps! :)
You need to wrap your widgets with Safe Area widget. After you need to set bottom property false
You can use flutter_statusbarcolor_ns package to achieve your requirements.
The above package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.
Can Anybody tell me how the change the color of this statusbar into other colors. As you can see in the following image it's a dark color and the time, battery, network details also shown in dark. so that's making them invisible.
I either want to change the color dynamically like when the background color becomes dark the text color of the system widgets ( time , battery, network) becomes white and when color is light those becomes dark.
or If I have to hardcode the color each time. where should I do it? Any solution will be appreciable.
this package: https://pub.dev/packages/flutter_statusbarcolor
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return MaterialApp(
title: "Flutter",
theme: ThemeData(
primarySwatch: Colors.grey,
),
home: HomeScreen(),
);
}
}
I found how to achieve this in flutter built in functions.
in MaterialApp go inside theme
create AppBarTheme and give the property brightenss: Brightness.dark or Brightness.light based on your requirement. If your status bar color is dark then give Brightness.dark it will make icons and text in white color and vice versa for light background.
I'm working on an app concept and as I was creating a wireframe and photoshop template I was wondering if this effect is recreateable using flutter.
Instead of taking a solid color I'd like to use the colors from the image instead. Does this effect have a certain name?
In this example the left area of the shadow stays beige, while the right side looks pink.
Recently I made drop_shadow_image package on flutter for the drop shadow you can take a look at the implementation below.
also you can find the link to GitHub repo here.
Installation
Add this to your package's pubspec.yaml file:
dependencies:
drop_shadow_image: ^0.9.0
Import the package into your dart file:
import 'package:drop_shadow_image/drop_shadow_image.dart';
Example
import 'dart:ui';
import 'package:drop_shadow_image/drop_shadow_lib.dart';
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body:
Center(
child: DropShadowImage(
offset: Offset(10,10),
scale: 1,
blurRadius: 12,
borderRadius: 20,
image: Image.asset('assets/cat.png',
width: 300,),
),
)
),
);
}
}
Properties of the class
1. Key key
2. double scale // Size to parent.
3. Offset offset // Position of shadow. (dx) for horizontal displacement (dy) for vertical displacement.
4. double blurRadius // Amount of blur in the shadow. 0 means no blur.
5. double borderRadius // border radius of image
6. Image image (#required) // The image.
Screenshot
In native android development, it is common to use FragmentTransaction to create a navigation animation, where the actionBar's position stays fixed (but actionBar's content changed), and the fragment beneath actionBar performs a transition animation (like slide in or out).
To put it simple, the AppBar and the body performs different transition animation. In flutter, what is the best practice to create such animation?
Currently I can think of a solution of using a navigation in Scaffold.body and using Stream + StreamBuilder to start AppBar redraw. Something like the following code.
Scaffold(
appBar: StreamBuilder<Int>(
stream: Bloc.of(context).currentFragmentId
builder: //Some logic to decide which AppBar is appropriate
),
body: Navigator(
//Navigation between fragments
),
)
But this is really weird. So is there a best practice to do this? Please let me know!
Well, since there is currently no answer availble. I'm going to share my solution here, though it is not so elegant.
The solution is to wrap AppBar in a Hero widget. Since Scaffold only takes a PreferedSize widget as an appbar, some customization is required.
class HeroAppBar extends StatelessWidget implements PreferredSizeWidget {
//...
#override
final Size preferredSize = Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0));
//...
#override
Widget build(BuildContext context) {
return Hero(
tag: tag,
child: AppBar(
//...
),
);
}
}
And make sure your Navigator implemented the HeroController. (Default Navigator has already implemented it)
All tutorials and documentation I've seen so far start of with importing flutter material. I am wondering is this an absolute requirement? What if I want to start with a plain canvas and build my own theme / widgets. Can I do this, if so what package should be used here so I get access to default widgets?
Although the answers here are correct, I want to add a few more points. To use raw widgets use import 'package:flutter/widgets.dart';
Here is a working example:
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(25.0),
child: Directionality(
textDirection: TextDirection.ltr,
child:Text("hello world",
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1)
),
)));
}
}
The directionality is needed, the padding was added so that we see the message, otherwise it is masked by the menubar in phone.
Widgets in flutter makes the developers day easy. All the widgets are built on top dart:ui lib. It is up to you, to decide to use existing set of widgets or develop your ui from scratch. Flutter does not stop you from writing your own widgets.
You can find a few raw example of here, that does not use any widgets at all.
If you simple don't want only material widgets, then you can just build your own themed widgets with all other basic widgets and layouts available in flutter.
If you wanted to build few of your own widgets with a canvas and use it along with other widgets in flutter, you look into CustomPaint and CustomPainter widgets.
Hope this helped!
Just as Chandan Purohit answered, use import 'package:flutter/widgets.dart';. Flutter official gives a minimal app in Introduction to widgets as follows:
import 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
Just change flutter/material.dart to flutter/widgets.dart, and you get a plain canvas to start.
Note: The color of Text is white by default.