flutter 关于吕特的动态主题

vyswwuz2  于 2023-03-31  发布在  Flutter
关注(0)|答案(1)|浏览(120)

我想根据我的手机系统动态更改我的应用程序的主题颜色.就像如果我将手机设置为黑暗模式,我的应用程序变暗,如果我将其设置为明亮模式,它变亮.我一直在互联网上,但我所看到的都是人们使用按钮.如果有一种方法,也许通过依赖关系,我很想知道。我也想看看我是否可以以某种方式改变我的脚手架的颜色动态太。我的代码

main.dart
import 'package:figma_test/home/home.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarBrightness: Brightness.dark
      ));
  runApp(
      const MyApp()
  );

}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
final lightTheme = ThemeData(
  brightness: Brightness.light,
  primarySwatch: Colors.blue,
  fontFamily: 'Roboto',
);

final darkTheme = ThemeData(
  brightness: Brightness.dark,
  primarySwatch: Colors.blueGrey,
  fontFamily: 'Roboto',
);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,

      ),
      home:  Home(),
    );
  }
}



home.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

  final List<String> _images = [

    'img1.jpeg',
    'img2.jpeg',
    'img3.jpeg',
    'img4.jpeg',
    'img5.jpeg'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfffafafa),
      appBar: PreferredSize(
        
        preferredSize: Size.fromHeight(30),
        child: AppBar(
          backgroundColor: Colors.white,
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 15),
              child: Row(
                children: [
                   const Icon(Icons.close),

                  const SizedBox(
                    width: 13,
                  ),
                  Text('Product Name',
                    style: GoogleFonts.roboto(
                      fontWeight: FontWeight.w400,
                      fontSize: 22
                    ),
                  )
                ],
              ),
            ),
            const SizedBox(
              height: 20,
            ),
          SizedBox(
            height: 400,
             child: ListView.builder(
               scrollDirection: Axis.horizontal,

               itemCount: _images.length,
                 itemBuilder: (context, index){
                 return  Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Container(
                     height: 400,
                     width: MediaQuery.of(context).size.width*0.9,
                     decoration: BoxDecoration(
                       image: DecorationImage(
                           image: AssetImage('asset/images/${_images[index]}',),
                               fit: BoxFit.fill
                       ),
                         boxShadow: [
                           BoxShadow(
                               color: Colors.grey.shade400,
                               blurRadius: 2,
                               spreadRadius: 2,
                               offset: const Offset(
                                   1.0,
                                   2.0
                               )
                           )
                         ],
                         borderRadius: BorderRadius.circular(20),
                         color: Color(0xffe7edf9)
                     ),
                   ),
                 );
                 }
             ),
           )
          ],
        ),
      ),
    );
  }
}
tyg4sfes

tyg4sfes1#

我不太清楚你的意思,但是你可以根据用户的系统主题轻松地更改主题。
MaterialApp()中,可以将themeMode属性设置为:

  • ThemeMode.dark
  • ThemeMode.light
    *一米四分一秒

下面是我在代码中使用它的方式:

return MaterialApp( 
    darkTheme: ThemeData(brightness: Brightness.dark), 
    theme: ThemeData(brightness: Brightness.light), 
    themeMode: ThemeMode.system,
  • 如果用户的系统主题为深色,则应用将使用darkTheme:主题。
  • 如果用户的系统主题是light,则应用将使用theme:主题。

相关问题