Flutter 全局样式修改

37 min read
// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      theme: ThemeData(
          primarySwatch: Colors.pink,
          appBarTheme: const AppBarTheme(
              backgroundColor: Colors.deepPurple,
              // This will be applied to the "back" icon
              iconTheme: IconThemeData(color: Colors.red),
              // This will be applied to the action icon buttons that locates on the right side
              actionsIconTheme: IconThemeData(color: Colors.amber),
              centerTitle: false,
              elevation: 15,
              titleTextStyle: TextStyle(color: Colors.lightBlueAccent))),
      home: const HomePage(),
    );
  }
}

// Home Screen
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Kindacode.com',
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.home),
            onPressed: () {},
          )
        ],
      ),
      body: Center(
        child: ElevatedButton(
            child: const Text(
              'Go To About Screen',
            ),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => const AboutPage()));
            }),
      ),
    );
  }
}

// About Screen
class AboutPage extends StatelessWidget {
  const AboutPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Override the global settings
        title: Text(
          'About Screen',
          style: Theme.of(context)
              .appBarTheme
              .titleTextStyle
              ?.copyWith(color: Colors.white),
        ),
        centerTitle: true,
        actions: [IconButton(icon: const Icon(Icons.info), onPressed: () {})],
      ),
      body: Center(
        child: ElevatedButton(
            child: const Text('Go to Contact screen'),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => const ContactPage()));
            }),
      ),
    );
  }
}

// Contact Screen
class ContactPage extends StatelessWidget {
  const ContactPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Contact Screen',
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
        actions: [
          IconButton(icon: const Icon(Icons.contact_mail), onPressed: () {})
        ],
      ),
      body: const Center(
        child: Text('Contact Screen'),
      ),
    );
  }
}

Apptheme

AppBarTheme({
  Color? color, 
  Color? backgroundColor, 
  Color? foregroundColor, 
  double? elevation, 
  Color? shadowColor, 
  ShapeBorder? shape, 
  IconThemeData? iconTheme, 
  IconThemeData? actionsIconTheme, 
  bool? centerTitle, 
  double? titleSpacing, 
  double? toolbarHeight, 
  TextStyle? toolbarTextStyle, 
  TextStyle? titleTextStyle, 
  SystemUiOverlayStyle? systemOverlayStyle, 
})