What is usematerial3 in Flutter? - Coding

In this article, we knew about the flutter theme data which is usematerial3. This made the effect into the whole app just because it is part of the theme data and we use it in material design as you can see in the example. Here we took two examples that show you the before and the after effect in our ui while we change our code.

How you can use this in our code?

First, you create the flutter project and then you simply copy the code which you want if you want first then you see the deep purple color in the theme data and if you copy then you can see the effect of usematerial3 in your app. After copying the code paste it in your main.dart and run it and then you find the same result as you can see in the example.

Before Implementation

Here we only take simply the deep purple color in our home by which we can see that color in our home and the button color as you see in the example. Here we take the scaffold and in the scaffold, we take the AppBar and in the body section we take the column and in the column, we take the input bar and the one elevated button in the center of the column.

Dart

import 'package:flutter/material.dart'; 
  
void main() { 
  runApp(const MyApp()); 
} 
  
class MyApp extends StatelessWidget { 
  const MyApp({super.key}); 
  
  // This widget is the root of your application. 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: 'Flutter Demo', 
      theme: ThemeData( 
        // This is the theme of your application. 
        // 
        // TRY THIS: Try running your application with "flutter run". You'll see 
        // the application has a blue toolbar. Then, without quitting the app, 
        // try changing the seedColor in the colorScheme below to Colors.green 
        // and then invoke "hot reload" (save your changes or press the "hot 
        // reload" button in a Flutter-supported IDE, or press "r" if you used 
        // the command line to start the app). 
        // 
        // Notice that the counter didn't reset back to zero; the application 
        // state is not lost during the reload. To reset the state, use hot 
        // restart instead. 
        // 
        // This works for code too, not just values: Most code changes can be 
        // tested with just a hot reload. 
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), 
        //useMaterial3: true, 
      ), 
      home: MyHomePage(), 
    ); 
  } 
} 
  
class MyHomePage extends StatefulWidget { 
  const MyHomePage({super.key}); 
  
  @override 
  State<MyHomePage> createState() => _MyHomePageState(); 
} 
  
class _MyHomePageState extends State<MyHomePage> { 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        // this is the appbar. 
        title: Text("GeeksForGeeks Material "), 
      ), 
      body: Padding( 
        padding: const EdgeInsets.all(8.0), 
        child: Column( 
          mainAxisAlignment: MainAxisAlignment.center, 
          crossAxisAlignment: CrossAxisAlignment.center, 
          children: [ 
            TextField( // this is the textfields 
              decoration: InputDecoration(hintText: "Enter your name"), 
            ), 
            SizedBox( 
              height: 30, 
            ), 
            ElevatedButton(  // this is the button  
              onPressed: () {}, 
              child: Text("Tap Here"), 
            ), 
          ], 
        ), 
      ), 
    ); 
  } 
} 

Output:

After Implementation

Dart

import 'package:flutter/material.dart'; 
  
void main() { 
  runApp(const MyApp()); 
} 
  
class MyApp extends StatelessWidget { 
  const MyApp({super.key}); 
  
  // This widget is the root of your application. 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: 'Flutter Demo', 
      theme: ThemeData( 
        // This is the theme of your application. 
        // 
        // TRY THIS: Try running your application with "flutter run". You'll see 
        // the application has a blue toolbar. Then, without quitting the app, 
        // try changing the seedColor in the colorScheme below to Colors.green 
        // and then invoke "hot reload" (save your changes or press the "hot 
        // reload" button in a Flutter-supported IDE, or press "r" if you used 
        // the command line to start the app). 
        // 
        // Notice that the counter didn't reset back to zero; the application 
        // state is not lost during the reload. To reset the state, use hot 
        // restart instead. 
        // 
        // This works for code too, not just values: Most code changes can be 
        // tested with just a hot reload. 
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), 
        useMaterial3: true, 
      ), 
      home: MyHomePage(), 
    ); 
  } 
} 
  
class MyHomePage extends StatefulWidget { 
  const MyHomePage({super.key}); 
  
  @override 
  State<MyHomePage> createState() => _MyHomePageState(); 
} 
  
class _MyHomePageState extends State<MyHomePage> { 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text("GeeksForGeeks Material "),// this is the app bar 
      ), 
      body: Padding( 
        padding: const EdgeInsets.all(8.0), 
        child: Column( 
          mainAxisAlignment: MainAxisAlignment.center, 
          crossAxisAlignment: CrossAxisAlignment.center, 
          children: [ 
            TextField( // this is the textfields 
              decoration: InputDecoration(hintText: "Enter your name"), 
            ), 
            SizedBox( 
              height: 30, 
            ), 
            ElevatedButton(  // this is the button 
              onPressed: () {}, 
              child: Text("Tap Here"), 
            ), 
          ], 
        ), 
      ), 
    ); 
  } 
} 

Output:

Reffered: https://www.geeksforgeeks.org

Dart

Related
Flutter - Design Bus Booking App UI
How to Build Music Player Application Using Flutter?
Flutter - BackDropFilter Widget
Flutter - ImageFiltered Widget
Flutter - TweenAnimationBuilder Widget

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	10