Development/Flutter (Dart)

[Flutter3.7] Material 3 (Material Design) 적용 예제 소스코드 및 디자인 예시 이미지&기능 설명

Tradgineer 2024. 2. 28. 17:15

 

 

1. Material Design 공식 사이트

 

https://m3.material.io/

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

 

 

 

 

 

2. Flutter 공식 material3 예시 디자인

 

https://flutter.github.io/samples/web/material_3_demo/

 

material_3_demo

 

flutter.github.io

 

 

 

 

 

3. material3 적용한 Flutter 예제 소스코드

 

// 사용법 예제 소스코드

import 'package:flutter/material.dart';

import 'my_home_page.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}