Flutter 使用局部样式 DefaultTextStyle

14 min read
  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: MyAppHome(),
        theme: ThemeData(textTheme: TextTheme(body1: TextStyle(fontSize: 20.0)),),
      );
    }
  }
  
  class MyAppHome extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Flutter DefaultTextStyle Tutorial by Woolha.com'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DefaultTextStyle(
              style: TextStyle(fontSize: 36, color: Colors.blue),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text(
                      'The first text',
                    ),
                    const Text(
                      'The second text',
                      style: TextStyle(fontSize: 24),
                    ),
                    const Text(
                      'The third text',
                      style: TextStyle(color: Colors.red),
                    ),
                  ],
                ),
              ),
            ),
            const Text(
              'The fourth text',
            ),
          ],
        )
      );
    }
  }