Skip to content

Instantly share code, notes, and snippets.

@ben-xx

ben-xx/text_button_theme.dart

Created July 23, 2022 22:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ben-xx/f781fbdb89dc242d265a0fa790a9f514 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ben-xx/f781fbdb89dc242d265a0fa790a9f514 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ben-xx created this gist Jul 23, 2022.
    173 changes: 173 additions & 0 deletions text_button_theme.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,173 @@
    // Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
    // for details. All rights reserved. Use of this source code is governed by a
    // BSD-style license that can be found in the LICENSE file.

    /// Example of setting app TextButton style/theme from MaterialApp
    /// theme & themeDark
    import 'package:flutter/material.dart';

    const blue = Colors.blue;
    const lightBlue = Color(0xFF64B5F6);
    const darkBlue = Color(0xFF0D47A1);
    const black = Colors.black87;
    const white = Colors.white;
    const green = Colors.green; //

    void main() => runApp(MyApp());

    class MyApp extends StatefulWidget {
    @override
    State<MyApp> createState() => MyAppState();

    static MyAppState of(BuildContext context) =>
    context.findAncestorStateOfType<MyAppState>()!;
    }

    class MyAppState extends State<MyApp> {
    ThemeMode _mode = ThemeMode.light;

    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    debugShowCheckedModeBanner: false,
    theme: ThemeData.from(
    colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.blue,
    brightness: Brightness.light,
    //inverseSurface: Colors.green,
    primary: blue, /// ModeWidget bg active color, ActionButton active bgColor
    /// AppBar bgColor
    primaryContainer: blue,
    onPrimary: Colors.white,
    secondary: Colors.grey, /// used in [OfflineSaveIndicator]
    //onBackground: lightBlue,
    onSecondary: white, // FAB Icon color if FABTheme not provided like below
    surface: white, // Mode Widget BoxDecoration color, inactive
    onSurface: black, // Mode Widget Text color
    )
    ).copyWith(
    textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(primary: black)
    )
    ),
    darkTheme: ThemeData.from(
    colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.blue,
    brightness: Brightness.dark,
    //surface: darkBlue,
    //inverseSurface: blue,
    primary: darkBlue,
    primaryContainer: darkBlue,
    onPrimary: white,
    secondary: lightBlue, /// used in [OfflineSaveIndicator]
    onBackground: lightBlue,
    onSecondary: white,
    surface: black, // Mode Widget BoxDecoration color, inactive
    onSurface: white, // Mode Widget Text color
    ),
    ).copyWith(
    textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(primary: white)
    )
    ),
    themeMode: _mode,
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
    }

    void toggleBrightness() {
    setState(() {
    _mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    print('Mode set: $_mode');
    });
    }
    }

    class MyHomePage extends StatefulWidget {
    final String title;

    const MyHomePage({
    Key? key,
    required this.title,
    }) : super(key: key);

    @override
    State<MyHomePage> createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;

    void _incrementCounter() {
    setState(() {
    _counter++;
    });
    }

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text(widget.title),
    actions: [
    IconButton(
    icon: const Icon(Icons.lightbulb),
    onPressed: MyApp.of(context).toggleBrightness
    )
    ]
    ),
    body: Center(
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
    const Text(
    'You have pushed the button this many times:',
    ),
    Text(
    '$_counter',
    style: Theme.of(context).textTheme.headline4,
    ),
    TextButton(
    onPressed: _incrementCounter,
    child: const Text('The Button'),
    )
    ],
    ),
    ),
    floatingActionButton: FloatingActionButton(
    onPressed: () => _openDialog(context),
    tooltip: 'Increment',
    child: const Icon(Icons.help),
    ),
    );
    }

    void _openDialog(BuildContext context) {
    showDialog(
    context: context,
    builder: (BuildContext context) {
    return AlertDialog(
    title: const Text('Button Colors'),
    content: const SizedBox(
    height:100,
    child: Center(
    child: Text('Look below')
    )
    ),
    actions: [
    TextButton(
    onPressed: Navigator.of(context).pop,
    child: const Text('Cancel'),
    ),
    TextButton(
    onPressed: Navigator.of(context).pop,
    child: const Text('Submit'),
    ),
    ]
    );
    }
    );
    }
    }