Suggest a feature
×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: D
Posted by: Alfredo Martel Revuelta
Added: Jun 11, 2018 6:08 PM
Views: 15
Tags: flutter themes
In order to share colors and font styles throughout our app, we can take advantage of themes. There are two ways to define themes: App-wide or using Theme Widgets that define the colors and font styles for a particular part of our application. In fact, app-wide themes are just Theme Widgets created at the root of our apps by the MaterialApp!
  1. import 'package:flutter/foundation.dart';
  2. import 'package:flutter/material.dart';
  3.  
  4. void main() {
  5.   runApp(new MyApp());
  6. }
  7.  
  8. class MyApp extends StatelessWidget {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     final appName = 'Custom Themes';
  12.  
  13.     return new MaterialApp(
  14.       title: appName,
  15.       theme: new ThemeData(
  16.         brightness: Brightness.dark,
  17.         primaryColor: Colors.lightBlue[800],
  18.         accentColor: Colors.cyan[600],
  19.       ),
  20.       home: new MyHomePage(
  21.         title: appName,
  22.       ),
  23.     );
  24.   }
  25. }
  26.  
  27. class MyHomePage extends StatelessWidget {
  28.   final String title;
  29.  
  30.   MyHomePage({Key key, @required this.title}) : super(key: key);
  31.  
  32.   @override
  33.   Widget build(BuildContext context) {
  34.     return new Scaffold(
  35.       appBar: new AppBar(
  36.         title: new Text(title),
  37.       ),
  38.       body: new Center(
  39.         child: new Container(
  40.           color: Theme.of(context).accentColor,
  41.           child: new Text(
  42.             'Text with a background color',
  43.             style: Theme.of(context).textTheme.title,
  44.           ),
  45.         ),
  46.       ),
  47.       floatingActionButton: new Theme(
  48.         data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  49.         child: new FloatingActionButton(
  50.           onPressed: null,
  51.           child: new Icon(Icons.add),
  52.         ),
  53.       ),
  54.     );
  55.   }
  56. }