How to keep hamburger icon without visible appBar flutter - dart

I recently tried keeping a Hamburger icon for my menu slider without an AppBar or at least completely invisible. The first attempt was with a SafeArea but that emptied Scaffold. Then I tried setting the Opacity to 0.0 like shown on the code below. But it gives out the same result as SafeArea with nothing on Scaffold. Please can anyone help?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new MaterialApp(
theme: ThemeData(
// Define the default Brightness and Colors
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
),
home: Scaffold(
Opacity(
opacity: 0.0,
appBar: AppBar(),
),
drawer: new Drawer(
child: new ListView(),
),
body: new Center(
child: new Column(
children: <Widget>[],
))),
);
}
}

If I have understood you well, you want to display a menu button to show the Drawer without displaying any AppBar.
One option is to use a Stack for the body of the Scaffold.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
var scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return new MaterialApp(
theme: ThemeData(
// Define the default Brightness and Colors
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
),
home: Scaffold(
key: scaffoldKey,
drawer: new Drawer(
child: new ListView(),
),
body: Stack(
children: <Widget>[
new Center(
child: new Column(
children: <Widget>[],
)),
Positioned(
left: 10,
top: 20,
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () => scaffoldKey.currentState.openDrawer(),
),
),
],
),
),
);
}
}

If I have understood your question well.
You have your own custom Menu button to open/close drawer.
You don't want to use AppBar as well.
In that case you can use GlobalKey<ScaffoldState>() object to open Drawer.
import 'package:flutter/material.dart';
GlobalKey<ScaffoldState> _scaffoldState = GlobalKey<ScaffoldState>();
return Scaffold(
key: _scaffoldState,
drawer: DrawerView(),
body: ThemeScreen(
header: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
icon: Icon(Icons.menu,
color: Colors.white,
size: 15),
onPressed: (){
_scaffoldState.currentState.openDrawer();
},
),
],
),
),
);

You can make AppBar completely invisible by setting the same color and elevation = 0
screenshot here
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF198BAA),
appBar: AppBar(
backgroundColor: Color(0xFF198BAA),
elevation: 0.0,
),
drawer: Drawer(
child: SafeArea(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: ListView(
children: <Widget>[
ListTile(
title: Text('Item1'),
)
],
),
),
),
),
);
}
}

This is similar to Ox.S's answer, but you can make the AppBar transparent and then change the icon to whatever color you want.
Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: IconThemeData(color: Colors.black),
),
drawer: Drawer(...

Related

How to change background color of Scaffold widget programatically for whole application

I am new to the flutter application development and got stuck in a problem.My application contains near about 5-6 screens and all the screens contains the scaffold widget like this.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF332F43)
);
}
Now on all the screens i have the same concept and design like this and all the screens will share same backGround color.Now i have a button in all screens i.e. Change Theme button and on the button click of that Change Theme button i want to change all the screens Scaffold widget to be changed.Now how can i achieve this ? Please help me in my problem.
Flutter has predefined way to change background color of scaffold across app.
Just change it in MaterialApp Widget inside of your main.dart (main file).
MaterialApp(
title: 'Flutter',
theme: ThemeData(
scaffoldBackgroundColor: const Color(0xFF332F43),
),
);
Color color = Colors.blue; // make it at root level
void main() {
runApp(MaterialApp(home: Page1()));
}
In your page1 class, import above file.
class Page1 extends StatefulWidget {
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: color,
appBar: AppBar(title: Text("Page 1")),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (c) => Page2())),
child: Text("Go to Page 2"),
),
RaisedButton(
child: Text("Change color"),
onPressed: () => setState(() => color = Colors.red),
),
],
),
),
);
}
}
In your page2 class, import first file.
class Page2 extends StatefulWidget {
#override
_Page2State createState() => _Page2State();
}
class _Page2State extends State<Page2> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: color,
appBar: AppBar(title: Text("Page 2")),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text("Back"),
),
RaisedButton(
child: Text("Change color"),
onPressed: () => setState(() => color = Colors.green),
),
],
),
),
);
}
}

Custom slider with emojis

I am building a flutter app and want to create a custom slider with emojis very similar to the reflectly app. I am attaching a screenshot , as you change the slider the emoji changes. I am pretty new to flutter and am struggling with the slider widget
You could do something like that:
I didn't use images for emojis faces but could put you in the right direction.
Full code:
import 'package:flutter/material.dart';
const _emojis = ['😃','😜','🤓','😁','😂','😞'];
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _value = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Colors.teal, Colors.tealAccent],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'${_emojis[_value.toInt()]}',
style: Theme.of(context).textTheme.display1,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_emojis[0], softWrap: true),
Expanded(
child: Slider(
value: _value,
//label: _emojis[_value.toInt()],
min: 0.0,
max: 5.0,
divisions: 5,
onChangeStart: (double value) {
print('Start value is ' + value.toString());
},
onChangeEnd: (double value) {
print('Finish value is ' + value.toString());
},
onChanged: (double value) {
setState(() {
_value = value;
});
},
activeColor: Colors.white,
inactiveColor: Colors.black45,
),
),
Text(_emojis[5], softWrap: true,)
],
),
),
),
],
),
),
),
);
}
}
This reviewpage animation is close to 90% of the reflectly animation.

Flutter FlatButton does not show tap animation / ripple effect

I have the following code:
return new ListTile(
leading: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Image.network(
"http://res.cloudinary.com/kennyy/image/upload/v1531317427/avatar_z1rc6f.png")),
title: new Row(
children: <Widget>[
new Expanded(child: new Text(message)),
new FlatButton(onPressed: null, child: new Text("Delete"))
]
),
subtitle: new Text(from),
);
which created a tile in my ListView.
Each tile should have a button.
When I tap the button - I don't see any ripple effect or animation that I actually clicked. I was pretty sure it's a part of the Material theme as a gesture for FlatButtons, but I tried a solution I found, using InkWell:
return new ListTile(
leading: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Image.network(
"http://res.cloudinary.com/kennyy/image/upload/v1531317427/avatar_z1rc6f.png")),
title: new Row(
children: <Widget>[
new Expanded(child: new Text(message)),
InkWell(
child: FlatButton(onPressed: null, child: new Text("Delete"), color: Colors.amber))
]
),
subtitle: new Text(from),
);
But still - my listview button does not have any ripple effect when tapped.
Any idea?
Flutter buttons are disabled by default. To enable a button, set its onPressed or onLongPress properties to a non-null value.
The ripple is not visible because you've set the property of your onPressed to null.
new FlatButton(onPressed: null, child: new Text("Delete"))
Change the onPressed property to something like this:
new FlatButton(onPressed: (){}, child: new Text("Delete"))
To compare here is an example of a no-null onPressed and a null valued onPressed.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListTile(
leading: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Image.network(
"http://res.cloudinary.com/kennyy/image/upload/v1531317427/avatar_z1rc6f.png")),
title: new Row(children: <Widget>[
//new Expanded(child: new Text(message)),
new TextButton(
onPressed: () {},
child: new Text("Delete"),
),
new TextButton(
onPressed: null,
child: new Text("Delete"),
)
]),
//subtitle: new Text(from),
),
);
}
}
*Note that the FlatButton is now deprecated so I've used TextButton in the example.

Flutter : Can anybody help making custom TabController in flutter?

I am making an app using flutter(dart). I need to make a tab controller with gradient background colour. I have used the DefaultTabController but couldn't get the way to add decoration or any gradient for App bar.Please find my code below:
import 'package:flutter/material.dart';
import 'package:vtech/CustomAppBar.dart';
class Policy extends StatefulWidget {
#override
_PolicyState createState() => _PolicyState();
}
class _PolicyState extends State<Policy> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Center(child:Text('POLICY')),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
The AppBar and TabBar widgets do not allow to set a gradient, just a color.
To achieve what you need you can create a custom widget GradientAppBar or GradientTabBar built with a Stack that integrates a Container with a gradient and an AppBar or TabBar.
You create the GradientAppBar with parameters that would go to the Container and to the AppBar itself.
Here is a working example for Gradient AppBar. Below is a similar example just for the TabBar.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Policy(),
);
}
}
class Policy extends StatefulWidget {
#override
_PolicyState createState() => _PolicyState();
}
class _PolicyState extends State<Policy> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: GradientAppBar(
colors: [Colors.white, Colors.black],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
elevation: 4.0,
bottom: TabBar(
indicatorColor: Colors.white,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Center(child: Text('POLICY')),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
class GradientAppBar extends StatefulWidget implements PreferredSizeWidget {
// Gradiente properties
final AlignmentGeometry begin;
final AlignmentGeometry end;
final List<Color> colors;
// Material property
final double elevation;
// AppBar properties - Add all you need to change
final Widget title;
final PreferredSizeWidget bottom;
#override
final Size preferredSize;
GradientAppBar({
Key key,
#required this.colors,
this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,
this.elevation,
this.title,
this.bottom,
}) : preferredSize = new Size.fromHeight(
kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
super(key: key); //appBar.preferredSize;
#override
_GradientAppBarState createState() => _GradientAppBarState();
}
class _GradientAppBarState extends State<GradientAppBar> {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Material(
elevation: widget.elevation,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: widget.begin,
end: widget.end,
colors: widget.colors,
)),
),
),
AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
bottom: widget.bottom,
title: widget.title,
),
],
);
}
}
And here the example for the gradient TabBar.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Policy(),
);
}
}
class Policy extends StatefulWidget {
#override
_PolicyState createState() => _PolicyState();
}
class _PolicyState extends State<Policy> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: GradientTabBar(
colors: [Theme.of(context).primaryColor, Colors.green],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
tabBar: TabBar(
//indicatorColor: Colors.white,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
title: Center(child: Text('POLICY')),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
class GradientTabBar extends StatefulWidget implements PreferredSizeWidget {
// Gradiente properties
final AlignmentGeometry begin;
final AlignmentGeometry end;
final List<Color> colors;
final TabBar tabBar;
GradientTabBar({
Key key,
#required this.colors,
this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,
this.tabBar,
}) : super(key: key);
#override
Size get preferredSize => tabBar.preferredSize;
#override
_GradientTabBarState createState() => _GradientTabBarState();
}
class _GradientTabBarState extends State<GradientTabBar> {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: widget.preferredSize.height,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: widget.begin,
end: widget.end,
colors: widget.colors,
)),
),
widget.tabBar,
],
);
}
}
you can try this
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.blue
],
),
),
),
In Appbar
appBar: AppBar(
title: Center(child: Text("Add Student",),),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
darkblue,
darkpurple
],
),
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.account_circle,color: Colors.white,),),
],
),

Can FlutterLogo be made to stretch-to-fill?

I would like to display a large FlutterLogo in my app:
https://docs.flutter.io/flutter/material/FlutterLogo-class.html
In order to account for varying screen sizes I would like to make it stretch-to fill. Is that possible? Or do I need to use a MediaQuery to determine the parent's size and pass that into FlutterLogo(size:)?
My current code:
Widget build(BuildContext context) {
return new Center(
child: new FlutterLogo(size: 800.0, style: FlutterLogoStyle.horizontal, textColor: Colors.white),
);
}
You can accomplish this with a ConstrainedBox:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData.dark(),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Example App')),
body: new ConstrainedBox(
constraints: new BoxConstraints.expand(),
child: new FlutterLogo(
style: FlutterLogoStyle.horizontal,
textColor: Colors.white,
),
),
);
}
}
I believe I have answered a similar question
How to stretch an icon to fill parent?
https://docs.flutter.io/flutter/widgets/Expanded-class.html
https://groups.google.com/forum/#!msg/flutter-dev/lsgdU1yl7xc/0pYS2qrzBQAJ
https://docs.flutter.io/flutter/widgets/FittedBox-class.html
https://docs.flutter.io/flutter/painting/BoxFit-class.html
new Expanded(
child: new FittedBox(
fit: BoxFit.fill,
child: new FlutterLogo( style: FlutterLogoStyle.horizontal, textColor: Colors.white),
),
),
I feel kinda strange. Looking at the OP profile ID, I wonder if I answer the question correctly.
I hope this helps.
used this code to run it
import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
MyAppBar({this.title});
// Fields in a Widget subclass are always marked "final".
final Widget title;
#override
Widget build(BuildContext context) {
return new Container(
height: 56.0, // in logical pixels
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(color: Colors.blue[500]),
// Row is a horizontal, linear layout.
child: new Row(
// <Widget> is the type of items in the list.
children: <Widget>[
new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null disables the button
),
// Expanded expands its child to fill the available space.
new Expanded(
child: title,
),
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
);
}
}
class MyScaffold extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Material is a conceptual piece of paper on which the UI appears.
return new Material(
// Column is a vertical, linear layout.
child: new Column(
children: <Widget>[
new MyAppBar(
title: new Text(
'Example title',
style: Theme.of(context).primaryTextTheme.title,
),
),
new Expanded(
child: new FittedBox(
fit: BoxFit.fill,
child: new FlutterLogo( style: FlutterLogoStyle.horizontal, textColor: Colors.white),
),
),
],
),
);
}
}
void main() {
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new MyScaffold(),
));
}
edit: I posted complete code just for darky, since I forgot to mention that expanded needs to be wrapped into row, column, or flex container to expand

Resources