I want to use ThemeData's textTheme for global using in my app , And the textTheme is only change the font and color.
But As you can see in the picture , there will be a obvious difference between the Text Widgets. How is this difference come ? because the above label's TextStyle is actually the same as the bottom label. Did the the ThemeData will do something more to change my TextStyle?
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,
textTheme: TextTheme(
headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
)),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: Theme.of(context).textTheme.headline1,
),
Text(
'You have pushed the button this many times:',
style: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
),
],
),
),
);
}
}
The reason both texts look different is that you have not specified their fontWeight and flutter unfortunately gives both texts different default fontWeights. You only need to specify the same fontWeight for both and it will work. I tried it. This is 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,
textTheme: TextTheme(
headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
fontWeight: FontWeight.normal),
)),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: Theme.of(context).textTheme.headline1,
),
Text(
'You have pushed the button this many times:',
style: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
fontWeight: FontWeight.normal),
),
],
),
),
);
}
}
Related
The app app here loads a tabbed simple app with a scaffold, app bar, and bottomNavigationBar which is set as a TabBar.
When set at the bottomNavigationBar, the TabBar becomes white so I've overridden its background color using a Container widget.
While the rest of my app will change its color palette as expected, however it doesn't for my TabBar. Using Theme.of(context) to get the primary color doesn't work either, as the Theme's color scheme doesn't seem to change at all.
I've attached pictures of the problem too.
theme: ThemeData.light()
theme: ThemeData.dark()
Notice how the whole app except the bottom TabBar reflects these changes happily.
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sereal',
theme: ThemeData(primarySwatch: Colors.indigo),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('App'),
),
bottomNavigationBar: Container(
color: Theme.of(context).primaryColor,
child: const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.calendar_today),
text: 'Planner',
),
Tab(
icon: Icon(Icons.amp_stories),
text: 'Cards',
),
Tab(
icon: Icon(Icons.auto_stories),
text: 'Notes',
),
],
),
),
body: const TabBarView(
children: <Widget>[CardsView(), NotesView(), PlannerView()],
)),
));
}
}
1: make the DefaultTabController in a separate widget.
2: add these properties to the MaterialApp widget:
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
),
themeMode: ThemeMode.light,
3: instead of wraping the TabBar with a Container, wrap it with a Material widget
this is the main file code :
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(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
),
themeMode: ThemeMode.light,
home: const HomePage(),
);
}
}
this is the homepage code:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('App'),
),
bottomNavigationBar: Material(
color : Theme.of(context).primaryColor,
child: TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.calendar_today),
text: 'Planner',
),
Tab(
icon: Icon(Icons.amp_stories),
text: 'Cards',
),
Tab(
icon: Icon(Icons.auto_stories),
text: 'Notes',
),
],
),
),
body: const TabBarView(
children: <Widget>[CardsView(), NotesView(),PlannerView()],
)),
);
}
}
.................
this is how it looks when you run the app:
and this is how it looks when you change the themeMode to: ThemeMode.dark
Why am I unable to add an Image here? I am getting this error while adding an Image to Column Widget in Flutter. When I am removing the new keyword, I am getting another error. Please check into this issue . I have made a folder named assets>images>girl-icon.jpg . Also, I have enabled assets from pubspec.yaml file.
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(
debugShowCheckedModeBanner: false,
title: 'My First Flutter App',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
),
home: const WelcomeScreen());
}
}
class WelcomeScreen extends StatelessWidget {
const WelcomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
backgroundColor: Colors.amber,
),
body:Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget> [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
new Image.asset("assets/images/girl-icon.jpg"),
],
),
heightFactor: 30,
),
);
}}
See screenshot of the problem here
const requires a hard coded constant value and you have called MyApp as constant while it's dynamically being build that is why it's throwing an error. Remove const before MyApp to solve this issue :
void main() {
runApp(MyApp());
}
and also from here :
children: <Widget> [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
new Image.asset("assets/images/girl-icon.jpg"),
]
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(
debugShowCheckedModeBanner: false,
title: 'My First Flutter App',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
),
home: const WelcomeScreen());
}
}
class WelcomeScreen extends StatelessWidget {
const WelcomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
backgroundColor: Colors.amber,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
Image.asset("assets/images/girl-icon.jpg"),
],
),
heightFactor: 30,
),
);
}
}
my way is just to remove the
const <Widget>
I want to implement that text with divider in between lines:
Smart City Text
Do you guys have any ideas how can I implement that in flutter? I tried few things but it is kind of a challenge for me, because I am beginner. Divider line have to be long as text above and under line.
You can make a screen using auto_size_text package.
Using AutoSizeText and AutoSizeText.rich widget in that package,
and set a maxLines option to 1 and set font size big.
Because we set maxLines to 1, although set font size big, text will not be overflowed screen.
import 'package:auto_size_text/auto_size_text.dart';
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,
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
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Container(
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AutoSizeText(
'Smart City',
maxLines: 1,
style: TextStyle(
fontSize: 100,
fontWeight: FontWeight.bold,
),
),
Divider(color: Colors.black),
AutoSizeText.rich(
TextSpan(
children: [
TextSpan(
text: 'Advanced',
),
TextSpan(
text: ' urban',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: ' lighting solution',
),
],
),
style: TextStyle(fontSize: 100),
maxLines: 1,
),
],
),
);
}
}
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),
),
),
);
}
}
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),
),
)
);
}
}