Flutter Basics: My app bar color is not changing - flutter

import 'package:flutter/material.dart';
void main() {
runApp(RecipeApp());
}
class RecipeApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
title: 'Recipe Calculator',
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
home: const MyHomePage(title: 'Recipe Calculator'),
);
}
}
This is the current code and above is the current output as per the code, the color remains blue and white instead of grey and black

running on my emulator using your code it works, try restarting your app completely.
import 'package:flutter/material.dart';
void main() {
runApp(RecipeApp());
}
class RecipeApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
title: 'Recipe Calculator',
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
home: const MyHomePage(title: 'Recipe Calculator'),
);
}
}
class MyHomePage extends StatelessWidget {
final title;
const MyHomePage({this.title});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
);
}
}

Try below code hope its helpful to you ,I think you can used Scaffold Widget refer AppBar class here and refer Scaffold class here
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey,//change color on your need
title: Text(
'BottomNavigationBar Sample',
),
),
body:Container(),//or your widget
);
Your result screen->

Related

Flutter ColorScheme class Background color not showing in scaffold

My code is:
import 'package:flutter/material.dart';
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
secondary: Colors.purple,
primary: Color(0xFF0d0f1e),
background: primaryC,
),
),
home: InputPage(),
);
}
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Center(
child: Text('Body Text'),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
),
);
}
}
And I have no idea why the background color of my app won't turn into the black/purple color I have set for it. I am following a tutorial that was using the depricated theme: ThemeData but I can't find the reason why my background color isn't changing for the scaffold.
To set a background color for your Scaffold, you can set the scaffoldBackgroundColor in your ThemeData.
Using your example:
import 'package:flutter/material.dart';
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
theme: theme.copyWith(
// Pick the color here
scaffoldBackgroundColor: Colors.black,
colorScheme: theme.colorScheme.copyWith(
secondary: Colors.purple,
primary: Color(0xFF0d0f1e),
),
),
home: InputPage(),
);
}
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Center(
child: Text('Body Text'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
}
}

CupertinoDynamicColor not working for text style within a theme in Flutter

Currently I've got a problem with the dark mode for iOS in Flutter. I'm using a CupertinoApp with a CupertinoTheme.
With CupertinoDynamicColor.withBrightness() it's possible to define colors for dark and light theme. This is working for example for the navigation bar (barBackgroundColor), but not for the textTheme.
Someone already ask a similar question in the flutter repository but I don't know how to do this with a theme. Maybe you can help me there.
Example code:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'Flutter Demo',
theme: CupertinoThemeData(
barBackgroundColor: const CupertinoDynamicColor.withBrightness(
color: Colors.blue,
darkColor: Colors.red,
),
textTheme: CupertinoTextThemeData(
textStyle: TextStyle(
color: const CupertinoDynamicColor.withBrightness(
color: Colors.blue,
darkColor: Colors.red,
),
),
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(middle: Text('Test')),
child: Text('Test Text'),
);
}
}

How to change appBar's back icon theme globally?

Flutter automatically provides a back button for routes that can pop, but how can I change the back button Icon theme through the whole app?
Like how can I change the normal material back icon to chevron?
Create pages without Scafold and use this method to navigate between routes.
navigateToRoute(BuildContext context, Widget page,String title) {
Navigator.push(context, MaterialPageRoute(builder: (context) => Scaffold(
appBar: AppBar(
leading:Icon(Icons.chevron_left),
title: Text(title),
),
body: page,
)));
}
You have to create a custom BackButton in that case. I'll suggest that you can create a customAppBar method and use it everywhere.
Checkout the below code.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ScreenOne(),
);
}
}
class ScreenOne extends StatefulWidget {
#override
_ScreenOneState createState() => _ScreenOneState();
}
class _ScreenOneState extends State<ScreenOne> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: customAppBar(title: Text("Screen One")),
body: Center(
child: RaisedButton(onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => ScreenTwo()));
}),
),
);
}
}
class ScreenTwo extends StatefulWidget {
#override
_ScreenTwoState createState() => _ScreenTwoState();
}
class _ScreenTwoState extends State<ScreenTwo> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: customAppBar(
customBackButton: true,
title: Text("Screen Two"),
),
);
}
}
AppBar customAppBar({
Widget title,
bool customBackButton = false,
}) {
return AppBar(
leading: customBackButton ? CustomBackButton() : null,
title: title,
);
}
class CustomBackButton extends StatelessWidget {
const CustomBackButton({Key key, this.color, this.onPressed}) : super(key: key);
final Color color;
final Function onPressed;
#override
Widget build(BuildContext context) {
assert(debugCheckHasMaterialLocalizations(context));
return IconButton(
icon: Icon(Icons.arrow_back_ios),
color: color,
tooltip: MaterialLocalizations.of(context).backButtonTooltip,
onPressed: () {
if (onPressed != null) {
onPressed();
} else {
Navigator.maybePop(context);
}
},
);
}
}
Hope it helps :)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
appBarTheme: AppBarTheme(
iconTheme: IconThemeData(
color: Colors.black,
),
),
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);[![Initially didn't put any color so it was white[![This is the image when I added appbartheme and changed color to black][1]][1]][1]

Flutter button new theme copyWith doesn't change color

I've got a little piece of code below. It should show "add icon" with blue color. Instead it shows button with black color (as accentColor in MaterialApp).
Am I doing something wrong in "floatingActionButton"?
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
final appName = "Custom Themes";
return new MaterialApp(
title: appName,
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.red[300],
accentColor: Colors.black,
),
home: new MyHomePage(
title: appName
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, #required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: new Text(title),
),
body: new Center(
child: new Container(
color: Theme.of(context).primaryColor,
child: new Text(
"Text with background color",
style: Theme.of(context).textTheme.title,
),
),
),
floatingActionButton: new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.blue),
child: new FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
),
)
);
}
}
I watched a tutorial (it is flutter in iOS) and everything works like a charm there.
Tut is from April 2019. Maybe there is something that changed from that time?
You can use
Theme.of(context).copyWith(
colorScheme:
Theme.of(context).colorScheme.copyWith(secondary: Colors.blue),
)
detail reference https://flutter.dev/docs/cookbook/design/themes#complete-example
full code
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp( MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
final appName = "Custom Themes";
return MaterialApp(
title: appName,
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.red[300],
accentColor: Colors.black,
),
home: MyHomePage(
title: appName
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, #required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Container(
color: Theme.of(context).primaryColor,
child: Text(
"Text with background color",
style: Theme.of(context).textTheme.title,
),
),
),
floatingActionButton: Theme(
data: Theme.of(context).copyWith(
colorScheme:
Theme.of(context).colorScheme.copyWith(secondary: Colors.blue),
),
child: FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
),
)
);
}
}

How to fix Flutter MaterialApp(not_enough_required_arguments)?

when returning MaterialApp flutter shows error as follow "error: 1 required argument(s) expected, but 0 found. (not_enough_required_arguments at [demo] lib/main.dart:9)"Here is the screenshot
const _categoryName = "Cake";
const _categoryIcon = Icons.cake;
const _categoryColor = Colors.green;
import 'package:solution_02_category_widget/category.dart';
void main() {
runApp(UnitConverterApp());
}
class UnitConverterApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Unit Converter',
home: Scaffold(
backgroundColor: Colors.green[100],
body: Center(
child: Category(
name: _categoryName,
color: _categoryColor,
iconLocation: _categoryIcon,
),
),
),
);
}
}
You should wrap the title argument under AppBar Widget. You can in turn wrap the appBar argument inside the Scaffold. The scaffold is like an empty page that gives your app the white background. Below is a sample code implementation:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
// debugShowMaterialGrid: true,
theme: ThemeData(
brightness: Brightness .light,
accentColor: Colors.deepPurple,
primarySwatch: Colors.deepOrange),
home: Scaffold(
appBar: AppBar(
title: Text('Some text'),
),
),
);
}
}
Your code is working fine without error if i remove the Category() widget. The below code is working fine:
import 'package:flutter/material.dart';
const _categoryName = "Cake";
const _categoryIcon = Icons.cake;
const _categoryColor = Colors.green;
void main() {
runApp(UnitConverterApp());
}
class UnitConverterApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Unit Converter',
home: Scaffold(
backgroundColor: Colors.green[100],
body: Center(
child: Container(),
),
),
);
}
}
Maybe the problem is in the Category() widget so if you post it i can check it for you.