Floating Action Button in Flutter - flutter

I was trying to create the Floating Action button but I am missing icon.
My code is:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
centerTitle: true,
title: Text(
"Lessons of Flutter",
style: TextStyle(
color: Colors.white,
),
),
),
body: Center(
child: const Text('Press the button below!')
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
child: Icon(Icons.mouse),
backgroundColor: Colors.green,
),
),
);
}
}
it is a screen from the virtual device.( You can see icon looks weird.)

To use this class, make sure you set uses-material-design: true in your project's pubspec.yaml file in the flutter section. This ensures that the MaterialIcons font is included in your application. This font is used to display the icons. For example:
Refer this link: https://api.flutter.dev/flutter/material/Icons-class.html

The Icon is not rendering because of the missing font from the material design library. You have to enable the material design library in your pubspec.yml file as given below,
flutter:
uses-material-design: true
Just make uses-material-design to true and the error will be gone. This ensures that the MaterialIcons font is included in your application. This font is used to display the icons Here is the official docs of Icon class

Related

Flutter/Android change background color of Gesture Navigation icon

I have an icon set using a transparent image, on the home screen the background is white but when in the Gesture Navigation view the icon above the app screen is blue. How do I change this background color? (Using flutter)
I am also having this issue. As a work around, I keep the Material App ThemeData's primary color as white. Then used the Theme widget to override my page theme to use my custom theme.
https://api.flutter.dev/flutter/material/ThemeData-class.html
class MyApp extends StatelessWidget {
final _navigatorKey = GlobalKey<NavigatorState>();
NavigatorState? get _navigator => _navigatorKey.currentState;
MyApp({super.key});
// App Routing
Route<dynamic> _generateRoute(RouteSettings settings) {
Widget newPage = Container();
switch (settings.name) {
case AppRoutes.welcome:
newPage = const WelcomePage();
break;
case AppRoutes.login:
newPage = LoginPage();
break;
}
return FadeRoute(
page: Theme(
data: lightTheme,
child: newPage,
),
);
}
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider<AppBloc>(
create: (_) => AppBloc()..add(InitializeAppEvent())),
BlocProvider<AuthBloc>(create: (_) => AuthBloc())
],
child: BlocListener<AuthBloc, AuthState>(
listener: (_, state) {
if (state is Authenticated) {
// Go to Main Page
_navigator?.pushReplacementNamed(AppRoutes.home);
} else {
// Go to Login Page
_navigator?.pushReplacementNamed(AppRoutes.login);
}
},
child: MaterialApp(
navigatorKey: _navigatorKey,
title: 'Flutter Demo',
theme: ThemeData(primaryColor: Colors.white),
initialRoute: AppRoutes.welcome,
onGenerateRoute: _generateRoute,
)));
}
}
Thats the primary color you can change it like this
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.lightGreen,//here.change this one
),
)
It isn't from Android. Flutter's MaterialApp already provides a set of attributes for us, including a Prymary Color, ColorScheme, etc.
The reason is obvious, if every developer had to write every theme aspect in every widget coding would be awful. So Material widgets look for a theme, which Material will provide as default, if we don't overide it.
Know this, the solution is:
Overide some componentes of the whole Theme in the MaterialApp wich is my recomendation. The code bellow is an example of this.
Wrap a specifc widget/s with an Theme widget that overides the define Theme for explict specified atributes.
Pass a custom theme directly in the widgets you are using. Very common to see in Text widgets when people do Text( "some text", style: TextStyle()) (note the TextStyle), but this logic is apllied to a bunch of other widgets too, including buttons. Disavantage of this is that you have to manual change every widget, so no auto darkmode and painfull design changes for reasonable size apps. I do not recomend as a go to solution for every widget.
Example of what I meant by overiding the default Theme of your App:
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Association App for AMDKP Integrated Plataform',
theme: ThemeData(
colorScheme: ColorScheme(
brightness: Brightness.light,
primary: consts.golden1,
onPrimary: consts.black41,
secondary: Colors.green.shade500,
onSecondary: Colors.green.shade300,
background: consts.greyWhite,
onBackground: consts.black41,
surface: Colors.white,
onSurface: Colors.black45,
error: Colors.red.shade900,
onError: Colors.red.shade900,
),
primarySwatch: Colors.blue,
primaryColor: consts.golden1,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
shadowColor: consts.black41,
primary: Theme.of(context).colorScheme.onSurface.withAlpha(150),
onPrimary: Theme.of(context).colorScheme.surface,
)),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.white.withAlpha(230),
backgroundColor: Colors.black87.withAlpha(170),
textStyle: Theme.of(context).textTheme.bodyMedium,
padding: const EdgeInsets.symmetric(horizontal: 10.0),
)),
inputDecorationTheme: const InputDecorationTheme(
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: consts.golden1, width: 2)),
),
),
home: const HomePage(),
So definitely take a look at flutter themes, it will empower your flutter developer skills and you will benefit a lot by using it anyway! :)
Cheers

Why don't the buttons in Flutter Web have a margin?

I have the following code:
Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {},
child: Text('Boton 1'),
),
ElevatedButton(
onPressed: () {},
child: Text('Boton 2'),
),
ElevatedButton(
onPressed: () {},
child: Text('Boton 3'),
),
],
),
),
)
Why on mobile do the buttons have a margin but on the web they do not?
Note: I know I can add padding/margin manually, set default button style, etc. I want to know why the default behaviour is different.
Quite an interesting question. Thanks for asking.
This is basically due to the ThemeData.materialTapTargetSize parameter for the MaterialApp.
This feature decides what should be touchable dimensions of Material Button, in your case ElevatedButton.
The difference in behaviour is due to this piece of code in flutter/lib/src/material/theme_data.dart at line no 377. flutter sdk: ">=2.12.0 <3.0.0"
switch (platform) {
case TargetPlatform.android:
case TargetPlatform.fuchsia:
case TargetPlatform.iOS:
materialTapTargetSize ??= MaterialTapTargetSize.padded;
break;
case TargetPlatform.linux:
case TargetPlatform.macOS:
case TargetPlatform.windows:
materialTapTargetSize ??= MaterialTapTargetSize.shrinkWrap;
break;
}
The MaterialTapTargetSize.padded, make buttons take a height of 48. Whereas, the MaterialTapTargetSize.shrinkWrap does what it says and removes that constraint.
If you have your MaterialApp like this,
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
home: CupertinoPickerExample(),
)
Then the out put is,
Adding to #Nisanth Reddy's answer, you may also want to look at visualDensity, which is set also by defaultTargetPlatform here, as a result of this.
To ensure a consistent look across platfoms, I use the following -
MaterialApp(
...
theme: ThemeData(
...
materialTapTargetSize: MaterialTapTargetSize.padded,
visualDensity: VisualDensity.standard,
),
)

How can I change the textbutton color in the flutter showAboutDialog?

I'm using the showAboutDialog function from flutter to show used licences in my project. How ever I'm stuck with changing the text color of the VIEW LICENSES and CLOSE textbuttons. See this image for clarification:
This is my code:
...
onTap: () {
showAboutDialog(
context: context,
applicationName: 'bla',
applicationLegalese: 'November 2023',
);
},
What I tried so far is looking for a color field inside the showAboutDialog how ever I could not find anything. I'm assuming that I could change the color in my MaterialApp ThemeData. Unfortunately I was not able to find the specific theme to override the default styling of those textbuttons.
I tried the following in my MaterialApp ThemeData to change the color of VIEW LICENSES and CLOSE to green but that did not change anything:
textButtonTheme: TextButtonThemeData(style: ButtonStyle(foregroundColor: MaterialStateProperty.all<Color>(Colors.green))
Any ideas about this?
I was not satisfied with the answers here because all were showing only MaterialColor use-cases and I wanted a custom color. But I finally found something explaining it well on the following link.
https://blog.logrocket.com/new-material-buttons-in-flutter/
Basically, what is confusing is that the new design uses the primary color instead of the textStyle property. You can still apply the other answers to change the overall theme using a MaterialColor, and you can override the existing color theme using any color by using primary under TextButton.styleFrom.
Example for anywhere in the app:
TextButton(
onPressed: () {},
style: TextButton.styleFrom(
foregroundColor: Colors.pink,
),
child: Text(
'TextButton (New)',
style: TextStyle(fontSize: 30),
),
)
Example for the theme:
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: kDarkColor, // This is a custom color variable
textStyle: GoogleFonts.fredokaOne(),
),
),
You can use this:
return MaterialApp(
theme: ThemeData.dark().copyWith(
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith(
(state) => Colors.orange)))),
home: MyWidget(),
);
MaterialStateProperty.resolveWith takes a function, you can specify the color based on states, such as
MaterialState.pressed,
MaterialState.hovered,
MaterialState.focused,
More info on this.
How about this one?
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
colorScheme: ColorScheme.fromSwatch(
primarySwatch: Colors.green,
).copyWith(),
),
debugShowCheckedModeBanner: false,
home: YourScreen(),
);
}
i run this code.
after some research i find out this way to change colour.
for this you need to set application main theme colour change, like this
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.brown,//i am set brown colour,you can set your colour here
),
debugShowCheckedModeBanner: false,
home: YourScreen(),
);
}
after this its work,
showAboutDialog(
context: context,
applicationName: 'bla',
applicationLegalese: 'November 2023',
);
If you want to change the colors only for the dialog and not for the whole app, you have to create a new context. Surround the Button that showing the dialog with a Theme and a Builder
Theme(
data: Theme.of(context).copyWith(
colorScheme: colorScheme.copyWith(primary: Colors.green),
),
child: Builder(
builder: (context) {
return ListTile(
title: Text('show dialog'),
onTap: () => showAboutDialog(
context: context,
...)
);
},
),
)

How to change the color of the back button in a CupertinoNavigationBar in Flutter

I would like to change the color of the back button in my flutter app.
Here is what I have at the moment: Screenshoot
I would like to change the color from light blu to white. I have searched online but found nothing. Here is my code (note my button is create automatically)
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
heroTag: 'menupage',
transitionBetweenRoutes: false,
middle: Text(
'Menu Page',
style: kSendButtonTextStyle,
),
),
Many thanks in advance !
I resolved with setting the CupertinoTextThemeData...
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoApp(
theme: CupertinoThemeData(
primaryColor:
Colors.white, //change color of the BOTTOM navbar icons when selected
textTheme: CupertinoTextThemeData(
primaryColor:
Colors.white, //change color of the TOP navbar icon
Thanks Lucas for pointing me in the right direction
Example
actionsForegroundColor: Colors.white in CupertinoNavigationBar
Do it
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(actionsForegroundColor: Colors.white,
heroTag: 'menupage',
transitionBetweenRoutes: false,
middle: Text(
'Menu Page',
style: TextStyle(),
),
), child: Text(''),
);

How to make a translucent appbar flutter

How to make a translucent appbar with flutter?
I need to create an app bar but I do not know where to start.
exemple:
Image
Here's how to make a scaffold layout with a translucent app bar:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class TranslucentExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
// Overrides the standard translucent status bar.
statusBarColor: Colors.transparent,
),
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black12,
// Remove any elevation to avoid seeing a shadow underneath the translucent material of the app bar.
elevation: 0.0,
title: Text('Photo frame'),
action: <Widget>[
IconButton(
icon: Icon(Icons.settings),
tooltip: 'Settings',
onPressed: () => print('something'),
),
],
),
// You might have to change the fit of the image to make it 'full screen'.
body: Image.network('url.to/image'),
),
);
}
}
Unfortunately it isn't possible to fully recreate the screenshot you provided since it currently isn't possible to have a transparent or translucent navigation bar on Android with Flutter apps.
Only add extendBodyBehindAppBar: true,
like:
return Scaffold(
appBar: AppBar(
title: Text("Photo"),
backgroundColor: Colors.black12,
),
extendBodyBehindAppBar: true,
body: Container(),
);