USING THEMES TO STYLE YOUR APP

The theme widgets are a great way to style and define global colors and font styles for your app. There are two ways to use theme widgets—to style the look and feel globally or to style just a portion of the app. For instance, you can use themes to style the color brightness (light text on a dark background or vice versa); the primary and accent colors; the canvas color; and the color of app bars, cards, dividers, selected and unselected options, buttons, hints, errors, text, icons, and so on.

Using a Global App Theme 

When the project is created the default theme color of  our application is blue and canvas color is White.

To change the theme of your application we use the 'theme' property in material App that is your entry point of your GUI or Application. 

See the Below code to change the of your app:

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.deepPurple,//this will change your theme color
        
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

If You want to change the color of canvas of your application and change the GUI representation in your application Flutter all so provide the way to change representation of your application.

To Change your Canvas and representation of your app see the following code:

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.deepPurple,
        canvasColor: Colors.deepPurpleAccent,
        platform: TargetPlatform.iOS,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

This code will Change you application like below:

                    Before                                           After

In above code the "TargetPlatform" Property allows you to show the iOS traits on android and vice versa in to the Flutter Application. The TargetPlatform property has five choices they are as follow:

1. Android
2. iOS
3. Windows
4. Linux
5. Fuchsia

These Are the operating System.

If you want to Show the iOS traits in android simply you have to write the "TargetPlateform.iOS"

this will Show the Bellow result:

 

 

Using a Theme for Part of an App

In above section we change the primarySwatch color and Canvas color of flutter application.Which affect to all the widget in the application .What if You want to change the only one widget in the application have different color and rest widgets use the default scheme in app.

To override the app wide theme you can wrap the widgets in a Theme widget. This method will completely override the app ThemeData instance without inheriting any style.

Bellow Sample code show how it's done:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("DEMO"),),
      body:  Center(  child: Theme(    // Unique theme with ThemeData - Overwrite
          data: ThemeData(      
            cardColor: Colors.deepOrange,    
          ),    child: Card(      
        child: Text('Unique ThemeData'),    
      )
    )
      )
    );
  }
}

 Result: