Code for application is as following
class MyApp extends StatelessWidget {
const MyApp({Key? key}): super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.green,
)
);
}
}
Need to change primaryColor, textTheme, scaffoldBackgroundColor.
Related
I have declared primary color to Color(0xFF0C9869) to this which is kind of green color but the appbar is always blue until I change it in appbar widget why is my primary color not working. I am running this code in android studio.
main.dart
import 'package:flutter/material.dart';
import 'package:plant/components/home.dart';
import 'package:plant/constraint.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: kPrimaryColor,
scaffoldBackgroundColor: kBackgroundColor,
textTheme: Theme.of(context).textTheme.apply(bodyColor: kTextColor),
),
home: Homescreen(),
);
}
}
constraint.dart
import 'package:flutter/material.dart';
const kPrimaryColor = Color(0xFF0C9869);
const kTextColor = Color(0xFF3C4046);
const kBackgroundColor = Color(0xFF9F8FD);
const double kDefaultPadding = 20.0;
home.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class Homescreen extends StatelessWidget {
const Homescreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(),
);
}
AppBar buildAppBar() {
return AppBar(
elevation: 0,
leading: IconButton(
onPressed: () {},
icon: SvgPicture.asset("assets/icons/menu.svg")
),
);
}
}
you will have to declare it in appBarTheme in ThemeData .
theme: ThemeData(
primaryColor: kPrimaryColor,
scaffoldBackgroundColor: kBackgroundColor,
textTheme: Theme.of(context).textTheme.apply(bodyColor: kTextColor),
appBarTheme: AppBarTheme(backgroundColor: kPrimaryColor),
),
I'm new to flutter. working on a chat app. I have created a app bar but the colors I added in main.dart not display. it just display as default blue color. how to correct??
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
//title: 'Profile Section',
theme: ThemeData(
primaryColor: Color(0xff075e54),
accentColor: Color(0xff128C7E)),
home: Homescreen(key: null),
);
}
}
homescreen.dart
import 'package:flutter/material.dart';
class Homescreen extends StatefulWidget {
Homescreen({ Key? key }) : super(key: key);
#override
_HomescreenState createState() => _HomescreenState();
}
class _HomescreenState extends State<Homescreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Whatsapp Clone"),
actions: [
IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
],
),
);
}
}
Use this, as your code. It should work.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
final ThemeData theme = ThemeData(); //You need to make a var, that works as ThemeData
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
//title: 'Profile Section',
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(primary: Color(0xff075e54),secondary: Color(0xff128C7E), //Then use it with colorScheme.
),
),
home: Homescreen(key: null),
);
}
}
I have read and understood a similar question posted here, but am having trouble applying it to my use case. I am new to Flutter and am creating an app that streams audio from a given URL using Ryan Heise's audio_service plugin. Using this plugin I instantiate an audioHandler immediately upon starting my app:
late AudioHandler audioHandler;
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
final session = await AudioSession.instance;
await session.configure(const AudioSessionConfiguration.music());
audioHandler = await AudioService.init(
builder: () => AudioPlayerHandler(),
config: const AudioServiceConfig(
androidNotificationChannelId: 'com.ryanheise.myapp.channel.audio',
androidNotificationChannelName: 'Channel Name',
androidNotificationOngoing: true,
),
);
runApp(const MyApp());
}
With this audioHandler initialized, I would like to use it in child widgets. The example below demonstrates one such child widget:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Koradi Radio",
theme: ThemeData(
brightness: Brightness.light,
scaffoldBackgroundColor: Colors.white70,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
themeMode: ThemeMode.system,
home: const EnglishHome());
}
}
class EnglishHome extends StatefulWidget {
const EnglishHome({Key? key}) : super(key: key);
#override
_EnglishHomeState createState() => _EnglishHomeState();
}
class _EnglishHomeState extends State<EnglishHome> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('English Radio'),
backgroundColor: Colors.transparent,
),
body: ...
}
}
Note that MyApp currently just routes to EnglishHome(), but I plan on adding additional languages and instead routing MyApp to a page where a user can select their language. How can I pass audioHandler to all descendent widgets from Main() ? (EnglishHome, EspHome, FrenchHome, etc?) Based upon what I have read, I will either be modifying the Key parameter of child widgets or else their BuildContext?
You can use provider package and all you need to do is use Provider.value and then use Provider.of(context) in your EnglishHome, FrenchHome etc classes.
late AudioHandler audioHandler;
Future<void> main() async {
audioHandler = await AudioService.init(...);
runApp(MyApp(audioHandler));
}
class MyApp extends StatelessWidget {
final AudioHandler audioHandler;
const MyApp(this.audioHandler, {Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Provider.value(
value: audioHandler, // Providing the data above MaterialApp
child: MaterialApp(
home: EnglishHome(),
),
);
}
}
class EnglishHome extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Accessing the data.
final audioHandler = Provider.of<AudioHandler>(context);
return Container();
}
}
The other answers here are also valid solutions, but what I was able to do was add an audioHandler parameter to EnglishHome:
class EnglishHome extends StatefulWidget {
var audioHandler;
EnglishHome({Key? key, this.audioHandler}) : super(key: key);
#override
_EnglishHomeState createState() => _EnglishHomeState();
And then pass the audioHandler in when the Widget was called from my main.dart file:
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Radio",
theme: ThemeData(
brightness: Brightness.light,
scaffoldBackgroundColor: Colors.blue[100],
),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
themeMode: ThemeMode.system,
home: EnglishHome(
audioHandler: audioHandler,
));
}
}
Arabic text is not connected when I specify a stroke width. Here's what I see:
The connections within the circled portion shouldn't be there, but instead each character should be connected, like in cursive text. Here's the code:
import 'package:flutter/material.dart';
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,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
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> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Text.rich(TextSpan(
text: 'كيف الحال',
style: TextStyle(
fontSize: 80,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = Colors.blue))));
}
}
If I use PaintingStyle.fill instead of PaintingStyle.stroke above, I don't see any issue because the text is filled in.
How can I get rid of these connections? Is there a way to merge paths?
If you stack another Text widget that just colors the text, then the connections between two letters is hidden:
import 'package:flutter/material.dart';
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,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
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> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
Text('كيف الحال',
style: TextStyle(
fontSize: 80,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = Colors.blue)),
Text('كيف الحال',
style: TextStyle(
fontSize: 80,
color: Colors.white,
))
],
));
}
}
You must stack because Flutter only allows specifying one of color/foreground/background.
If the color has transparency, then the connections are shown. So my question isn't fully addressed, but I don't need transparency.
So I was working with Flutter and I needed a custom Widget for a ListView where every widget has its own theme based on some data.
The proper way to do it seems to be something like this:
class CustomWidget extends StatefulWidget {
CustomWidget({Key key, this.data}) : super(key: key);
final Color data;
#override
_CustomWidgetState createState() => _CustomWidgetState();
}
class _CustomWidgetState extends State<CustomWidget> {
#override
Widget build(BuildContext context) {
return Theme(
data: ThemeData(primaryColor: widget.data),
child: Builder(builder: (context) {
return Container(
color: Theme.of(context).primaryColor,
);
}),
);
}
}
But if I do it like this, what exactly is the advantage of this?
Specifically applying the color in the container? Why can't I just do color: widget.data?
Wouldn't it make more sense if things like TextTheme automatically applied to every Text() decadence of Theme()?
The ThemeData is used to configure a Theme or MaterialApp widget:
https://api.flutter.dev/flutter/material/ThemeData-class.html
The primaryColor value does not affect the color of the Text widget, from the docs:
The background color for major parts of the app (toolbars, tab bars, etc)
If you want to change the color of the text then you can use the textTheme property:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
accentColor : Colors.black,
textTheme: TextTheme(bodyText2: TextStyle(color: Colors.purple)),
primaryColor : Colors.black
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
primaryColor: is used for the appbar
accentColor: is used to color the foreground
textTheme: will change the color of the text and style it
working example:
https://dartpad.dartlang.org/bba537def9dbfa771400309a4e6415ed