How to change brightness for Container inside Scaffold - flutter

I need to change the brightness for the Container inside Scaffold, the snippet of code looks like below.
Any hints or suggestions are more than welcome!
PS: I checked document , but the example of changing brightness is for MaterialApp not for Container inside Scaffold.
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Brightness.light,
title: Text(
"My Card brightness",
style: TextStyle(color: Colors.white),
),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
),
body: SingleChildScrollView(
child: Column(children: <Widget>[
Card(
color: Color.fromARGB(255, 247, 247, 247),
margin: const EdgeInsets.fromLTRB(10, 10, 10, 40),
child: Column(
children: <Widget>[
// logo
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 100,
//height: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color.fromARGB(255, 0, 0, 0),
shape: BoxShape.rectangle,
),
// i need increase brightness here
child: Container(
width: 90,
child: Image.network(
'${widget.logo}',
fit: BoxFit.fitWidth,
)),
)),
],
),


I think changing the brightness of the Scaffold only, at this moment is still not possible. But, you can add the color to your Scaffold and add the opacity to it:
Example:
Scaffold(
backgroundColor: Colors.white.withOpacity(0.8),
appBar: AppBar(
title: Text(
"My Card",
style: TextStyle(color: Colors.white),
),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
),
body: null,
);
NOTE: Opacity's value range between 0.0 - 1.0


You can set the backgroundColor parameter for Scaffold to a different color of your choice.
https://api.flutter.dev/flutter/material/Scaffold/backgroundColor.html
Scaffold(
backgroundColor: Colors.white,
)

Related

Widget getting pushed behind Status Bar in Custom App Bar

I'm currently trying to make my appBar appear like the picture below but seem to be running into one particular issue every time I try doing so.
I have given the appBar a height of 100 and my idea was to distribute the height in a 40 60 ratio between the two Containers(amber and red). Things look fine when there's only the amber Container but as soon as I try adding the red Container, the amber Container somehow gets pushed up behind the status bar and I have no idea what is causing this.
This is till the point things look great with the amber Container
This is when the above anomaly occurs
This is my code. (the part commented out is the design for the Red Container)
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
HomeScreenState createState() => HomeScreenState();
}
class HomeScreenState extends State<HomeScreen> {
bool _toggleDropDown = false;
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
elevation: 0,
// backgroundColor: Theme.of(context).scaffoldBackgroundColor,
backgroundColor: Colors.green,
titleSpacing: 0,
title: Column(
children: [
Container( //Amber Container
width: double.infinity,
height: 40,
color: Colors.amber,
child: Column(
children: [
Container(
padding: const EdgeInsets.only(left: 5),
height: 15,
width: double.infinity,
// color: Colors.red,
child: const Text(
'Delivering To',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: 15),
),
),
Container(
height: 25,
width: double.infinity,
padding: const EdgeInsets.only(left: 5),
// color: Colors.blue,
child: Row(
children: [
const Text(
'Current Location',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold),
),
const SizedBox(width: 20),
Container(
height: double.infinity,
width: 20,
// color: Colors.yellow,
child: InkWell(
onTap: () {
setState(() {
_toggleDropDown = !_toggleDropDown;
});
},
child: Icon(
!_toggleDropDown
? Icons.keyboard_arrow_down
: Icons.keyboard_arrow_up,
color: Colors.red,
),
))
],
),
),
],
),
),
// Container( //Red Container
// height: 60,
// width: double.infinity,
// color: Colors.red,
// padding: EdgeInsets.only(top: 8),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// InkWell(
// onTap: () {},
// child: Icon(
// Icons.search,
// size: 25,
// )),
// Row(
// children: [
// InkWell(
// onTap: () {},
// child: const Icon(
// Icons.shopping_cart_outlined,
// color: Colors.white,
// size: 25,
// ),
// ),
// InkWell(
// onTap: () {},
// child: const Icon(
// Icons.notifications_none_outlined,
// color: Colors.white,
// size: 25,
// ),
// )
// ],
// )
// ],
// ),
// )
],
)),
),
);
}
}
FYI : I have also tried wrapping the Scaffold with SafeArea and the output that produces looks like this:

The issue is here AppBar is not getting height:100. While using PreferredSize you can just use Column or just using toolbarHeight: 100 on AppBar.
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
elevation: 0,
// backgroundColor: Theme.of(context).scaffoldBackgroundColor,
backgroundColor: Colors.green,
titleSpacing: 0,
toolbarHeight: 100, //<this
Or just do
return Scaffold(
appBar: AppBar(
elevation: 0,
toolbarHeight: 100, //<this

The trick lies in wrapping your Scaffold() with a SafeArea() widget.
Scaffold represents the whole screen of a device, each and every pixel of your screen.
SafeArea takes into account notches, status bars, bottom navigation bars and bottom navigation buttons.
Here's a quick how-to:
class _MyScreenState extends State<DonationDetails> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(), //your ui components goes here
));
}
}
UPDATE TO YOUR USE CASE
import 'package:flutter/material.dart';
class HomeScreenTest extends StatefulWidget {
HomeScreenTestState createState() => HomeScreenTestState();
}
class HomeScreenTestState extends State<HomeScreenTest> {
bool _toggleDropDown = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
elevation: 0,
automaticallyImplyLeading: false,
leading: null,
backgroundColor: Colors.green,
titleSpacing: 0,
title: Container(
width: double.infinity,
height: 40,
color: Colors.amber,
child: Column(
children: [
Container(
padding: const EdgeInsets.only(left: 5),
height: 15,
width: double.infinity,
// color: Colors.red,
child: const Text(
'Delivering To',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: 15),
),
),
Container(
height: 25,
width: double.infinity,
padding: const EdgeInsets.only(left: 5),
// color: Colors.blue,
child: Row(
children: [
const Text(
'Current Location',
style: TextStyle(
color: Colors.grey, fontWeight: FontWeight.bold),
),
const SizedBox(width: 20),
Container(
height: double.infinity,
width: 20,
// color: Colors.yellow,
child: InkWell(
onTap: () {
setState(() {
_toggleDropDown = !_toggleDropDown;
});
},
child: Icon(
!_toggleDropDown
? Icons.keyboard_arrow_down
: Icons.keyboard_arrow_up,
color: Colors.red,
),
))
],
),
),
],
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(80),
child: Container(
//Red Container
height: 60,
width: double.infinity,
color: Colors.red,
padding: EdgeInsets.only(top: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_cart_outlined,
color: Colors.white,
size: 25,
),
),
Row(
children: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_cart_outlined,
color: Colors.white,
size: 25,
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.notifications_none_outlined,
color: Colors.white,
size: 25,
),
),
],
)
],
),
),
),
),
),
);
}
}

You can use bottom in 'AppBar'.
Move the red Container to bottom with PreferredSize widget as parent. like this.
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
elevation: 0,
// backgroundColor: Theme.of(context).scaffoldBackgroundColor,
backgroundColor: Colors.green,
titleSpacing: 0,
title: Container(
//Amber Container
width: double.infinity,
height: 40,
color: Colors.amber,
child: Column(
children: [
Container(
padding: const EdgeInsets.only(left: 5),
height: 15,
width: double.infinity,
// color: Colors.red,
child: const Text(
'Delivering To',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: 15),
),
),
Container(
height: 25,
width: double.infinity,
padding: const EdgeInsets.only(left: 5),
// color: Colors.blue,
child: Row(
children: [
const Text(
'Current Location',
style: TextStyle(
color: Colors.grey, fontWeight: FontWeight.bold),
),
const SizedBox(width: 20),
Container(
height: double.infinity,
width: 20,
// color: Colors.yellow,
child: InkWell(
onTap: () {
setState(() {
_toggleDropDown = !_toggleDropDown;
});
},
child: Icon(
!_toggleDropDown
? Icons.keyboard_arrow_down
: Icons.keyboard_arrow_up,
color: Colors.red,
),
))
],
),
),
],
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(80),
child: Container(
//Red Container
height: 60,
width: double.infinity,
color: Colors.red,
padding: EdgeInsets.only(top: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InkWell(
onTap: () {},
child: Icon(
Icons.search,
size: 25,
)),
Row(
children: [
InkWell(
onTap: () {},
child: const Icon(
Icons.shopping_cart_outlined,
color: Colors.white,
size: 25,
),
),
InkWell(
onTap: () {},
child: const Icon(
Icons.notifications_none_outlined,
color: Colors.white,
size: 25,
),
)
],
)
],
),
),
),
),
),
);

Add Badge on a hamburger menu icon in flutter

Hi Please help I am trying to add a red Badge on a hamburger menu icon in the flutter app like below

You can achieve this with badges plugin here
Add this to your package's pubspec.yaml file under dependencies:
badges: ^2.0.2
then import,
import 'package:badges/badges.dart';
finally add Badge in AppBar,
AppBar(
leading: Badge(
position: BadgePosition.topEnd(top: 10, end: 10),
badgeContent: null,
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
),
title: Text('Badge Demo', style: TextStyle(color: Colors.black)),
backgroundColor: Colors.white,
)

Using Stack, similar sample code:
class NotificationIcon extends StatelessWidget {
final bool active;
final double marginTopLeft;
const NotificationIcon({Key key, this.active = true, this.marginTopLeft})
: super(key: key);
#override
Widget build(BuildContext context) {
final color = active ? Colors.white : const Color(0xff40a9ff);
final margin = marginTopLeft ?? 17;
return Container(
width: 24,
height: 24,
child: Stack(
children: [
Center(
child: Icon(
Icons.notifications,
color: color,
),
),
Positioned(
right: margin,
top: margin,
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
),
width: 5,
height: 5,
),
),
),
)
],
),
);
}
}

It can be easily done using the Stack widget. I have given an example of how you can use stack to achieve that. Note that you have to use Scaffold.of(yourContext).openDrawer() to open the attached drawer (as I've done here) since the hamburger icon is manually placed there.
import 'package:flutter/material.dart';
void main() {
runApp(Example());
}
class Example extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Example",
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: InkWell(
splashColor: Colors.lightBlue,
onTap: () => Scaffold.of(context).openDrawer(),
child: Center(
child: Container(
margin: EdgeInsets.only(left: 10),
width: 40,
height: 25,
child: Stack(
children: [
Icon(
Icons.menu,
color: Colors.grey[850],
),
Positioned(
left: 25,
top: 0,
child: Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
width: 10,
height: 10,
),
),
),
)
],
),
),
),
),
title: Text("Hello"),
actions: [
],
),
body: Center(child: Text("Welcome")),
),
);
}
}

Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
return Scaffold(
key: _scaffoldKey,
drawer: Drawer(),
appBar: AppBar(
backgroundColor: Colors.red,
title: Text(
"Some Text",
style: TextStyle(color: Colors.white),
),
leading: InkWell(
splashColor: Colors.lightBlue,
onTap: () {
_scaffoldKey.currentState.openDrawer();
},
child: Center(
child: Container(
margin: EdgeInsets.only(left: 10),
width: 40,
height: 25,
child: Stack(
children: [
Icon(
Icons.menu,
color: Colors.white,
),
Positioned(
left: 25,
top: 0,
child: Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
width: 10,
height: 10,
),
),
),
)
],
),
),
),
),
),
body: SafeArea(
child: Container(
),
),
);
}
Please use this. And if you want to show the number as well, you can use Badge too.

Vertically placing two trailing icon in List Tile

I have placed two arrow icons vertically in a column of a list-tile using trailing option. But I am not able to get the desired rendering. I used the flexible widget to adjust them but the top icon is not moving upwards.
The layout I am getting
This is my code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: ListView(children: <Widget>[
new Container(
color: Colors.lightBlue,
child: ListTile(
title: Text("This is a title"),
subtitle: new Text("This is subtitle"),
trailing: new Container(
color: Colors.yellow,
child: Column(
children: <Widget>[
new Flexible(
flex: 6,
child: new IconButton(
icon: Icon(Icons.arrow_drop_up), onPressed: () {})
),
new Flexible(
flex: 4,
child: new Text("1")
),
new Flexible(
flex: 5,
child: new IconButton(
icon: Icon(Icons.arrow_drop_down),
onPressed: () {})
),
],
),
),
),
)
]),
),
);
}
}
I have the content in the container to show the colours. I want the up arrow at the top of the yellow box.
Please help.

Try this way. But no matter how you do it, the arrows will be very small and inconvenient to use.
Try to create your own widget with a different design to make it more convenient for the user. Maybe something like this.
ListView(children: <Widget>[
new Container(
color: Colors.lightBlue,
child: ListTile(
title: Text("This is a title"),
subtitle: new Text("This is subtitle"),
trailing: new Container(
width: 150,
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(5.0),
topLeft: Radius.circular(5.0)),
color: Colors.black.withOpacity(0.7),
),
child: Center(
child: Icon(Icons.remove,color: Colors.white),
),
width: 50,
),
Container(
width: 50,
color: Colors.white,
child: Center(
child: Text('0'),
),
),
Container(
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(5.0),
topRight: Radius.circular(5.0)),
color: Colors.black.withOpacity(0.7),
),
child: Center(
child: Icon(Icons.add, color: Colors.white,),
),
)
],
)),
),
)
]),
Your code.
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
child: Icon(
Icons.arrow_drop_up,
size: 21,
)),
Text(
"1",
style: TextStyle(fontSize: 12),
),
Container(
child: Icon(
Icons.arrow_drop_down,
size: 21,
)),
],
),

Space between FlatButton in flutter

enter image description hereHello I am making an application where i need to maximize and minimise the screen.But i want to reduce space between 'A+'(i.e. maximising the screen) and 'A-'(i.e. minimising).I am attaching an image for better understanding.Thank you.
Here is the code:
return Scaffold(
appBar: AppBar(
title: Text(''),
backgroundColor: Color(0xFF125688),
actions: <Widget>[
FlatButton(
padding: EdgeInsets.all(0),
onPressed: null,
child: Text('A+',style: TextStyle(
fontSize: 22.0,fontWeight: FontWeight.bold,color: Colors.white
),)),
FlatButton(
padding: EdgeInsets.all(0),
onPressed: null,
child: Text('A-',style: TextStyle(
fontSize: 15.0,fontWeight: FontWeight.bold,color: Colors.white
),),
)
],
),

Use SizedBox
Scaffold(
appBar: AppBar(
title: Text(''),
titleSpacing: 10,
backgroundColor: Color(0xFF125688),
actions: <Widget>[
SizedBox(
width: 30,
child: FlatButton(
padding: EdgeInsets.all(0),
onPressed: null,
child: Text('A+',style: TextStyle(
fontSize: 22.0,fontWeight: FontWeight.bold,color: Colors.white
),))),
SizedBox(
width: 30,
child:FlatButton(
padding: EdgeInsets.all(0),
onPressed: null,
child: Text('A-',style: TextStyle(
fontSize: 15.0,fontWeight: FontWeight.bold,color: Colors.white
),),
))
],
))

Image of the Flatbutton:
Container(
decoration: new BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.blue, width: 1.0),
borderRadius: new BorderRadius.all(Radius.circular(3.0)),
),
width: double.infinity,
child: FlatButton(
padding: EdgeInsets.all(8.0),
onPressed: () {
// Write the function
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Add a Note"),
Icon(
Icons.note_add,
color: Colors.blue,
),
],
),
),
),

How to implement ontap() function in a custom navigation-drawer list items

In my attempt to create a custom Navigation Drawer in Flutter, I am looking for how I can implement the onTap() method on the list items. I think I should be able to define the function and pass it into the _buildRow(Icons.person_pin, "Profile"), as an argument.
pls check my code below to understand what I actually mean
I simply want to respond to a click/tap event when the list menu are tap. in the default navigation drawer the is onTap attribute in the ListTile Widget.
That is
ListTile(
title: Text("Home"),
onTap: () {
Navigator.of(context).pop();
}
Here is my code snippet
import 'package:flutter/material.dart';
import 'package:payload/src/oval-right-clipper.dart';
class AppEntryHomeAuthenticated extends StatelessWidget {
final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
final Color primary = Colors.white;
final Color active = Colors.grey.shade800;
final Color divider = Colors.grey.shade600;
#override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
appBar: AppBar(
elevation: 50.0,
backgroundColor: Colors.white,
centerTitle: true,
title: Text('PayLoad', style: TextStyle(color: Colors.black)),
actions: <Widget>[
Icon(Icons.settings),
],
automaticallyImplyLeading: false,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
_key.currentState.openDrawer();
},
),
),
drawer: _buildDrawer(),
body: SingleChildScrollView(),
);
}
_buildDrawer() {
return ClipPath(
clipper: OvalRightBorderClipper(),
child: Drawer(
child: Container(
padding: const EdgeInsets.only(left: 16.0, right: 40),
decoration: BoxDecoration(
color: primary, boxShadow: [BoxShadow(color: Colors.black45)]),
width: 300,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(
Icons.power_settings_new,
color: active,
),
onPressed: () {},
),
),
Container(
height: 90,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [Colors.white10, Colors.white10])),
child: CircleAvatar(
child: Image.asset(
"assets/images/logo.png",
fit: BoxFit.contain,
),
radius: 40,
),
),
SizedBox(height: 5.0),
Text(
"PayLoad Mobile",
//"PayLoad Wallet",
style: TextStyle(
color: active,
fontSize: 18.0,
fontWeight: FontWeight.w600),
),
// Text(
// "#ray",
// style: TextStyle(color: active, fontSize: 16.0),
// ),
SizedBox(height: 30.0),
_buildRow(Icons.home, "Home",),
_buildDivider(),
_buildRow(Icons.person_pin, "Profile"),
_buildDivider(),
_buildRow(Icons.save, "Saving Targets", showBadge: true),
_buildDivider(),
_buildRow(Icons.notifications, "Notifications",
showBadge: false),
_buildDivider(),
_buildRow(Icons.settings, "Settings"),
_buildDivider(),
_buildRow(Icons.question_answer, "Feedback"),
_buildDivider(),
_buildRow(Icons.info_outline, "Help"),
_buildDivider(),
_buildRow(Icons.share, "Share"),
_buildDivider(),
],
),
),
),
),
),
);
}
Divider _buildDivider() {
return Divider(
color: divider,
);
}
Widget _buildRow(IconData icon, String title, {bool showBadge = false}) {
final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
return Container(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: Row(children: [
Icon(
icon,
color: active,
),
SizedBox(width: 10.0),
Text(
title,
style: tStyle,
),
Spacer(),
if (showBadge)
Material(
color: Colors.deepOrange,
elevation: 5.0,
shadowColor: Colors.red,
borderRadius: BorderRadius.circular(5.0),
child: Container(
width: 25,
height: 25,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.circular(5.0),
),
child: Text(
"beta",
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.bold),
),
),
)
]),
);
}
}

If I understood your issue correctly, you can wrap your items with a GestureDetector and use its onTap method:
GestureDetector(
onTap: () => myMethod(),
child: Container(
...
),
),

Works out well.
I only need to wrap the each list in Inkwell