MaterialApp Widget

It is likely the main or core component of a flutter app.

The MaterialApp widget provides a wrapper around other Material Widgets. We can access all the other components and widgets provided by Flutter SDK.

Attributes and Properties:

1. home: The widget that is the home of the application, typically a Scaffold.

2. title: The title that appears on the device's system bar.

3. theme: The overall theme of the application, defining colors, typography, and other visual aspects.

4. routes: A map of named routes used for navigation within the app.

5. initialRoute: The initial route the app should navigate to when it starts.

6. onGenerateRoute: A callback function that allows dynamic generation of routes.

7. navigatorKey: A key to use when accessing the Navigator from the BuildContext.

8. navigatorObservers: A list of observers for the Navigator.

9. debugShowMaterialGrid: A property that shows a grid overlay for material design visual debugging.

Example:

import 'package:flutter/material.dart';
import 'package:flutter_application_1/page1.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, 
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: page1(),
    );
  }
}
import 'package:flutter/material.dart';

class page1 extends StatelessWidget {
  const page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      appBar: AppBar(
        title: const Text('Main Page'),
      ),
      body: Column(
        children: [
          const Center(child: Text(
            'Welcome to My App!',
            style: TextStyle(fontSize: 20),
          ),
          ),
        ElevatedButton(onPressed: () {

        }, child: Text("Button"),
           )
        ],
      ),
    );   
  }
}

In this example, the MaterialApp widget is used to define the title and theme of the application. The home property is set to an instance of MyHomePage, which is a simple Scaffold with an AppBar and a Center containing a welcome message.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App Example',
      theme: ThemeData(
        primarySwatch: Colors.green,
        accentColor: Colors.orange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
      routes: {
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Welcome to Material App Example!',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
              child: Text('Go to Second Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(prev
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text(
          'This is the Second Page!',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

In this full example, the MaterialApp widget is used with additional properties such as routes and theme. Two pages (MyHomePage and SecondPage) are defined, and navigation between them is demonstrated using the Navigator.