Fluuter: Material3 App Bar shows no color, only white - flutter

I am starting to use Material 3 for flutter.
However, even when use the basic counter app that is as default, when I add:
useMaterial3: true,
The app bar goes white, with no background. Even when I set : colorSchemeSeed
Here is my code:
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorSchemeSeed: Colors.red,
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
Why does the app bar turn into a white background?
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}

I'm not sure but if you can replace the colorSchemeSeed instead of primaryColor should work
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.red,
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}

Related

How to run a method that calls an URL on Flutter right after the app is opened?

Today I have a button that calls the method _launchURL. But I'd like to call this method right after the app opens, without the need to press a button.
import 'package:flutter/material.dart';
import 'package:flutter_custom_tabs/flutter_custom_tabs.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom Tabs Example',
theme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
),
darkTheme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.dark,
),
home: Builder(
builder: (_context) => Scaffold(
appBar: AppBar(
title: const Text('Flutter Custom Tabs Example'),
brightness: Brightness.dark,
),
body: Center(
child: TextButton(
onPressed: () => _launchURL(_context),
child: Text(
'Open Page',
style: TextStyle(fontSize: 17),
),
),
),
),
),
);
}
Future<void> _launchURL(BuildContext context) async {
final theme = Theme.of(context);
try {
await launch(
'https://www.google.com/',
customTabsOption: CustomTabsOption(
toolbarColor: theme.primaryColor,
enableDefaultShare: true,
enableUrlBarHiding: true,
showPageTitle: true,
animation: CustomTabsSystemAnimation.slideIn(),
extraCustomTabs: const <String>[
// ref. https://play.google.com/store/apps/details?id=org.mozilla.firefox
'org.mozilla.firefox',
// ref. https://play.google.com/store/apps/details?id=com.microsoft.emmx
'com.microsoft.emmx',
],
),
safariVCOption: SafariViewControllerOption(
preferredBarTintColor: theme.primaryColor,
preferredControlTintColor: Colors.white,
barCollapsingEnabled: true,
entersReaderIfAvailable: false,
dismissButtonStyle: SafariViewControllerDismissButtonStyle.close,
),
);
} catch (e) {
// An exception is thrown if browser app is not installed on Android device.
debugPrint(e.toString());
}
}
}
Widget build(BuildContext context) {
_launchURL(context); // <= here
return MaterialApp(
title: 'Flutter Custom Tabs Example',
theme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
),
.
.
.
.
Or you can add it in initstate, but your method needs a BuildContext to work.

In flutter How to change FAB (Floating Action Button) custom animation Icon

I am new in flutter and now i am stuck to change FAB animation.Actually i am trying to before i press FAB that time it hadd add Icon and after press FAB it change icon close insted of add icon.
i provide one animation gif file link to more understand if any one know the solution please suggest me to solve this problem.
Here is the link https://miro.medium.com/max/468/1*qGa6VU4grjqEwAOScRm9BA.gif
In this link provided animation is showing that before press it shows the menu option icon and after press it show close icon but i want add option instead of menu option.
like add_close not a menu_close animationIcon.
I hope you understand my problem and suggest me
I think this code fulfill your requirements.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter FAB Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("FAB"),
),
floatingActionButton: AnimatedIconButton(
size: 30,
onPressed: () {
},
duration: Duration(milliseconds: 200),
endIcon: Icon(
Icons.close,
color: Colors.white,
),
startIcon: Icon(
Icons.add,
color: Colors.white,
),
startBackgroundColor: Colors.blue,
endBackgroundColor: Colors.blue,
),
);
}
}
this is the namespace which i used:
import 'package:flutter/material.dart';
import 'package:animated_icon_button/animated_icon_button.dart';
This code will work for all your requirements such as animation,multiple fab buttons with on pressed and also support images as a fab icon.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter FAB Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: UniWidget(),
);
}
}
class UniWidget extends StatefulWidget {
#override
_UniWidgetState createState() => _UniWidgetState();
}
class _UniWidgetState extends State<UniWidget> {
#override
Widget build(BuildContext context) {
var childButtons = List<UnicornButton>();
childButtons.add(UnicornButton(
hasLabel: false,
currentButton: FloatingActionButton(
backgroundColor: Colors.blue,
mini: false,
child: Padding(
padding: const EdgeInsets.all(15),
child: Image.asset('assets/images/arrow.png'),
),
onPressed: () {
print('scanbar');
},
)));
childButtons.add(UnicornButton(
hasLabel: false,
currentButton: FloatingActionButton(
backgroundColor: Colors.blue,
mini: false,
child: Padding(
padding: const EdgeInsets.all(15),
child: Image.asset('assets/images/contact.png'),
),
onPressed: () {
print('Contact');
},
)));
return Scaffold(
floatingActionButton: UnicornDialer(
parentButtonBackground: Colors.blue,
orientation: UnicornOrientation.VERTICAL,
childPadding: 10.0,
parentButton: Icon(Icons.add),
childButtons: childButtons),
appBar: AppBar(
title: Text("Fab demo"),
),
body: Center());
}
}
here is the namespaces
import 'package:flutter/material.dart';
import 'package:unicorndial/unicorndial.dart';
I hope it will fulfill your all type of requirements and work well in your project.

Flutter How to force Dark mode on specific screens

I'm building a news app using flutter, the app has 2 theme modes already dark and light debends on phone settings and works really great, but I need on some screens on my app to be dark whatever such as videos section or video page ...etc
I googled this and all the results about the normal theming which I did already.
I don't think there's any code I can put here to help, but if there please let me know!
You can override the current theme at any time simply by placing the desired widget in a Theme class.
I don't know if you are using Scaffold or not, but let's say you are then all you would need to do is:
// declare theme data if you don't have it already
final ThemeData specialThemeData = ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.yellow[700],
// and so on...
);
#override
Widget build(BuildContext context) {
// this the point of interest, return a Theme with desired Theme Data
return Theme(
data: specialThemeData,
child: Scaffold(
//...
It doesn't have to be Scaffold, it will work on any widegt.
Here is a fully functional example you can try out yourself:
import 'package:flutter/material.dart';
final ThemeData specialThemeData = ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.yellow[700],
accentColor: Colors.orange[500],
textTheme: TextTheme(
headline1: TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 24.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 18.0),
),
);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Home Page default theme'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _goToSpecialPage() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MySpecialPage()
)
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Your homepage, using default theme.',),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _goToSpecialPage,
tooltip: 'Go to special page',
child: Icon(Icons.navigate_next),
),
);
}
}
class MySpecialPage extends StatefulWidget {
MySpecialPage({Key key}) : super(key: key);
#override
_MySpecialPageState createState() => _MySpecialPageState();
}
class _MySpecialPageState extends State<MySpecialPage> {
void _backToHomePage(){
Navigator.pop(context);
}
#override
Widget build(BuildContext context) {
// this the point of interest, return a Theme with desired Theme Data
return Theme(
data: specialThemeData,
child: Scaffold(
appBar: AppBar(
title: Text('Special theme page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Your special page that uses a different theme.',),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _backToHomePage,
tooltip: 'Go back to home page',
child: Icon(Icons.navigate_before),
),
),
);
}
}

Generate GridView with flutter using index

what I am trying to do is generate a GridView with flutter with the index which is defined above, but it said "Undefined name index" for some reason, can you help me with that please.
Here is the code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp(items: List<String>.generate(1000, (index) => "Item $index")));
class MyApp extends StatelessWidget {
final List<String> items;
MyApp({Key key, #required this.items}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar:
AppBar(title:
Text('List View Vertical'),),
body:
GridView.count(
crossAxisCount: 2,
children: List.generate(100, index)(
return Center(child: Text('Items $index',
style: Theme.of(context).textTheme.headline,),);
))
)
);
}
}
The result I expect is generating 1000 rows of gridview using the index I have already defined.
Replace your build() with this:
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('List View Vertical'),
),
body: GridView.count(
crossAxisCount: 2,
children: items.map((title) {
return Center(
child: Text(
'$title',
style: Theme.of(context).textTheme.headline,
),
);
}).toList(),
),
),
);
}
Change your code to use the values from the property items that your are passing.
Example:
class MyApp extends StatelessWidget {
final List<String> items;
MyApp({Key key, #required this.items}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('List View Vertical'),
),
body: GridView.count(
crossAxisCount: 2,
children: items.map((text) {
return Center(
child: Text(
'$text',
style: Theme.of(context).textTheme.headline,
),
);
}).toList(),
),
),
);
}
}

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.