رونمایی از پخته‌ترین و کاربردی‌ترین محصولات آموزشی سون‌لرن با کلی آفرهای ویژه🔥
۰ ثانیه
۰ دقیقه
۰ ساعت
۵ محمد نوری
تفاوت در تم روشن و تاریک
جامعه فلاتر ایجاد شده در ۱۰ مرداد ۱۴۰۲

سلام خسته نباشید من در تم روشن وقتی روی skiill کیک می‌کنم مثل استاد اجرا می‌شه ولی تم دارک وقتی کلیک می‌کنم اصلا surfaceColor و shodw اجرا نمی‌شه ولی اگر زیاد دکمه کلیک رو روش نگردام یواش اجرا می‌شه لطفا کمک کیند

سلام. کدتون رو بفرستید . و یعنی چی یواش اجرا میشه؟

یلدا محصلی ۱۰ مرداد ۱۴۰۲، ۱۶:۲۷

وقتی روی skill‌ها در تم روشن یا دارک کلیک می‌کنم افکت که اعمال می‌شه در تم دارک 3ثانیه زمان می‌بره تا اعمال شه ولی تم روشن درست اجرا می‌شه در یک ثانیه امیدوارم درست توضیح داده باشم

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  ThemeMode _themeMode =ThemeMode.dark;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: _themeMode==ThemeMode.dark
      ?MyAppThemeConfig.dark().getTheme()
      :MyAppThemeConfig.light().getTheme(),
      home: MyHomePage(toggleThemeMode: (){
        setState(() {
          if(_themeMode==ThemeMode.dark){
            _themeMode=ThemeMode.light;
          }else{
            _themeMode=ThemeMode.dark;
          }
        });
      },),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final Function() toggleThemeMode;
  const MyHomePage({Key? key ,required this.toggleThemeMode }):super(key:key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  _skillType _skill = _skillType.photoshop;
  void updateSelectSkill(_skillType skille) {
    setState(() {
      this._skill = skille;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Curriculum Vitae'),
        actions: [
          Icon(CupertinoIcons.chat_bubble),
          InkWell(
            onTap: widget.toggleThemeMode,
            child: Padding(
              padding: EdgeInsets.fromLTRB(6, 0, 7, 0),
              child: Icon(CupertinoIcons.ellipsis_vertical),
            ),
          )
        ],
      ),
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Padding(
            padding: const EdgeInsets.all(32),
            child: Row(
              children: [
                Image.asset(
                  'assets/images/profile_image.png',
                  width: 60,
                  height: 60,
                ),
                SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Brece Seraphin',
                        style: TextStyle(fontWeight: FontWeight.w900),
                      ),
                      Text('product & print Deslgner'),
                      Row(
                        children: [
                          Icon(
                            CupertinoIcons.location,
                            size: 15,
                            color: Theme.of(context).textTheme.bodyLarge!.color,
                          ),
                          Text(
                            'paris france',
                            style: Theme.of(context).textTheme.bodyLarge,
                          )
                        ],
                      )
                    ],
                  ),
                ),
                Icon(
                  CupertinoIcons.heart,
                  color: Theme.of(context).primaryColor,
                )
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(32, 0, 32, 15),
            child: Text(
                'Enthusiastic young computer Geek, Freelance Designer in love of independence, I have alot of experience in graphical projects, and always give the best of myself to bring you to success.'),
          ),
          Divider(),
          Padding(
            padding: const EdgeInsets.fromLTRB(32, 16, 32, 16),
            child: Row(
              children: [
                Text(
                  'Skills',
                  style: TextStyle(
                      fontWeight:
                          Theme.of(context).textTheme.titleMedium!.fontWeight),
                ),
                Icon(
                  CupertinoIcons.chevron_down,
                  size: 11,
                )
              ],
            ),
          ),
          Center(
            child: Wrap(
              spacing: 8,
              runSpacing: 8,
              direction: Axis.horizontal,
              children: [
                skill(
                  imagePath: 'assets/images/app_icon_01.png',
                  titleSkill: 'Phtoshop',
                  shadowColor: Colors.blue.shade500,
                  isActiv: _skill == 'photoshop' ? true : false,
                  onTap: () {
                    updateSelectSkill(_skillType.photoshop);
                  },
                ),
                skill(
                  imagePath: 'assets/images/app_icon_05.png',
                  titleSkill: 'Adobe XD',
                  shadowColor: Colors.pink.shade500,
                  isActiv: _skill == 'adobeXd',
                  onTap: () {
                    updateSelectSkill(_skillType.adobeXd);
                  },
                ),
                skill(
                  imagePath: 'assets/images/app_icon_04.png',
                  titleSkill: 'Illustratar',
                  shadowColor: Colors.orange.shade500,
                  isActiv: _skill == 'illustratar',
                  onTap: () {
                    updateSelectSkill(_skillType.illustratar);
                  },
                ),
                skill(
                  imagePath: 'assets/images/app_icon_03.png',
                  titleSkill: 'After Effect',
                  shadowColor: Colors.blue.shade800,
                  isActiv: _skill == 'afterEffect',
                  onTap: () {
                    updateSelectSkill(_skillType.afterEffect);
                  },
                ),
                skill(
                  imagePath: 'assets/images/app_icon_02.png',
                  titleSkill: 'Lightroam',
                  shadowColor: Colors.blue,
                  isActiv: _skill == 'lightroam',
                  onTap: () {
                    updateSelectSkill(_skillType.lightroam);
                  },
                ),
              ],
            ),
          ),
          Divider(),
          Padding(
            padding: const EdgeInsets.fromLTRB(21, 12, 21, 12),
            child: Text(
              'Personal Information',
              style: TextStyle(
                  fontWeight:
                      Theme.of(context).textTheme.titleMedium!.fontWeight),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(32, 12, 32, 12),
            child: Column(
              children: [
                TextField(
                  decoration: InputDecoration(
                      labelText: 'Email', prefixIcon: Icon(CupertinoIcons.at)),
                ),
                SizedBox(
                  height: 10,
                ),
                TextField(
                  decoration: InputDecoration(
                      labelText: 'Password',
                      prefixIcon: Icon(CupertinoIcons.lock)),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(27, 5, 27, 25),
            child: SizedBox(
                width: double.infinity,
                height: 48,
                child: ElevatedButton(onPressed: () {}, child: Text('Save'))),
          )
        ]),
      ),
    );
  }
}
class skill extends StatelessWidget {
  final String imagePath;
  final String titleSkill;
  final Color shadowColor;
  final bool isActiv;
  final Function() onTap;
  const skill({
    Key? key,
    required this.imagePath,
    required this.titleSkill,
    required this.shadowColor,
    required this.isActiv,
    required this.onTap,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      borderRadius: BorderRadius.circular(12),
      onTap: onTap,
      child: Container(
        decoration: isActiv
            ? BoxDecoration(
                color: Theme.of(context).dividerColor,
                borderRadius: BorderRadius.circular(12))
            : null,
        width: 110,
        height: 110,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              decoration: isActiv
                  ? BoxDecoration(boxShadow: [
                      BoxShadow(
                          color: shadowColor.withOpacity(0.5), blurRadius: 20)
                    ])
                  : null,
              child: Image.asset(
                imagePath,
                width: 40,
                height: 40,
              ),
            ),
            Text(titleSkill)
          ],
        ),
      ),
    );
  }
}
class MyAppThemeConfig {
  final Color primaryColor = Colors.pink.shade400;
  final Color primaryTextColor;
  final Color secondaryTextColor;
  final Color surfaceColor;
  final Color backgroundColor;
  final Color appBarColor;
  final Brightness brightness;
  MyAppThemeConfig.dark()
      : primaryTextColor = Colors.white,
        secondaryTextColor = Colors.white70,
        surfaceColor = Color(0x0dffffff),
        backgroundColor = Colors.black,
        appBarColor = Colors.black,
        brightness = Brightness.dark;
  MyAppThemeConfig.light()
      : primaryTextColor = Colors.grey.shade900,
        secondaryTextColor = Colors.grey.shade900.withOpacity(0.8),
        surfaceColor = Color(0x0d000000),
        backgroundColor = Colors.white,
        appBarColor = Color.fromARGB(255, 235, 235, 235),
        brightness = Brightness.light;
  ThemeData getTheme() {
    return ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a blue toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        primarySwatch: Colors.pink,
        primaryColor: primaryColor,
        brightness: brightness,
        dividerColor: surfaceColor,
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(primaryColor)),
        ),
        scaffoldBackgroundColor: backgroundColor,
        appBarTheme: AppBarTheme(
            elevation: 0,
            backgroundColor: appBarColor,
            foregroundColor: primaryTextColor),
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide.none,
          ),
          filled: true,
          fillColor: surfaceColor,
        ),
        textTheme: GoogleFonts.latoTextTheme(
          TextTheme(
            bodyMedium: TextStyle(fontSize: 15,color: primaryTextColor),
            bodyLarge: TextStyle(fontSize: 14,color: secondaryTextColor),
            bodySmall: TextStyle(fontSize: 16,fontWeight: FontWeight.bold,color: primaryTextColor),
            
            titleMedium: TextStyle(fontWeight: FontWeight.bold,color: primaryTextColor)
          )
          )
        );
  }
}
enum _skillType { photoshop, adobeXd, illustratar, afterEffect, lightroam }
محمد نوری ۱۰ مرداد ۱۴۰۲، ۲۱:۵۶

سلام و درود

مشکل شما به این دلیل هست که در هر دو تم دارک و لایت برای رنگ skill‌های اکتیو از یک رنگ (divider color) استفاده می‌کنید که برای هر دو تم یک مقدار داره.

در نتیجه مقدار divider color رو در تم‌های دارک و لایت متفاوت قرار بدین مشکل حل میشه.

امیررضا بشیری ۱۱ مرداد ۱۴۰۲، ۱۷:۱۷

ببخشید تقیر دادم ولی مشکل حل نشد

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State createState() => _MyAppState();
}
class _MyAppState extends State {
  // This widget is the root of your application.
  ThemeMode _themeMode = ThemeMode.dark;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      locale: Locale('fa'),
      theme: _themeMode == ThemeMode.dark
          ? MyAppThemeConfig.dark().getTheme('fa')
          : MyAppThemeConfig.light().getTheme('fa'),
      home: MyHomePage(
        toggleThemeMode: () {
          setState(() {
            if (_themeMode == ThemeMode.dark) {
              _themeMode = ThemeMode.light;
            } else {
              _themeMode = ThemeMode.dark;
            }
          });
        },
      ),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final Function() toggleThemeMode;
  const MyHomePage({Key? key, required this.toggleThemeMode}) : super(key: key);
  @override
  State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
  _skillType _skill = _skillType.photoshop;
  void updateSelectSkill(_skillType skille) {
    setState(() {
      _skill = skille;
    });
  }
  @override
  Widget build(BuildContext context) {
    final localizations =AppLocalizations.of(context)!;
    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.profileTitle),
        actions: [
          Icon(CupertinoIcons.chat_bubble),
          InkWell(
            onTap: widget.toggleThemeMode,
            child: Padding(
              padding: EdgeInsets.fromLTRB(6, 0, 7, 0),
              child: Icon(CupertinoIcons.ellipsis_vertical),
            ),
          )
        ],
      ),
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Padding(
            padding: const EdgeInsets.all(32),
            child: Row(
              children: [
                Image.asset(
                  'assets/images/profile_image.png',
                  width: 60,
                  height: 60,
                ),
                SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        localizations.name,
                        style: TextStyle(fontWeight: FontWeight.w900),
                      ),
                      Text(localizations.job),
                      Row(
                        children: [
                          Icon(
                            CupertinoIcons.location,
                            size: 15,
                            color: Theme.of(context).textTheme.bodyLarge!.color,
                          ),
                          Text(
                            localizations.location,
                            style: Theme.of(context).textTheme.bodyLarge,
                          )
                        ],
                      )
                    ],
                  ),
                ),
                Icon(
                  CupertinoIcons.heart,
                  color: Theme.of(context).primaryColor,
                )
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(32, 0, 32, 15),
            child: Text(
                localizations.summary),
          ),
          Divider(),
          Padding(
            padding: const EdgeInsets.fromLTRB(32, 16, 32, 16),
            child: Row(
              children: [
                Text(
                  'Skills',
                  style: TextStyle(
                      fontWeight:
                          Theme.of(context).textTheme.titleMedium!.fontWeight),
                ),
                Icon(
                  CupertinoIcons.chevron_down,
                  size: 11,
                )
              ],
            ),
          ),
          Center(
            child: Wrap(
              spacing: 8,
              runSpacing: 8,
              direction: Axis.horizontal,
              children: [
                skill(
                  imagePath: 'assets/images/app_icon_01.png',
                  titleSkill: 'Phtoshop',
                  shadowColor: Colors.blue.shade500,
                  isActiv: _skill == 'photoshop' ? true : false,
                  onTap: () {
                    updateSelectSkill(_skillType.photoshop);
                  },
                ),
                skill(
                  imagePath: 'assets/images/app_icon_05.png',
                  titleSkill: 'Adobe XD',
                  shadowColor: Colors.pink.shade500,
                  isActiv: _skill == 'adobeXd',
                  onTap: () {
                    updateSelectSkill(_skillType.adobeXd);
                  },
                ),
                skill(
                  imagePath: 'assets/images/app_icon_04.png',
                  titleSkill: 'Illustratar',
                  shadowColor: Colors.orange.shade500,
                  isActiv: _skill == "illustratar",
                  onTap: () {
                    updateSelectSkill(_skillType.illustratar);
                  },
                ),
                skill(
                  imagePath: 'assets/images/app_icon_03.png',
                  titleSkill: 'After Effect',
                  shadowColor: Colors.blue.shade800,
                  isActiv: _skill == 'afterEffect',
                  onTap: () {
                    updateSelectSkill(_skillType.afterEffect);
                  },
                ),
                skill(
                  imagePath: 'assets/images/app_icon_02.png',
                  titleSkill: 'Lightroam',
                  shadowColor: Colors.blue,
                  isActiv: _skill == 'lightroam',
                  onTap: () {
                    updateSelectSkill(_skillType.lightroam);
                  },
                ),
              ],
            ),
          ),
          Divider(),
          Padding(
            padding: const EdgeInsets.fromLTRB(21, 12, 21, 12),
            child: Text(
              'Personal Information',
              style: TextStyle(
                  fontWeight:
                      Theme.of(context).textTheme.titleMedium!.fontWeight),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(32, 12, 32, 12),
            child: Column(
              children: [
                TextField(
                  decoration: InputDecoration(
                      labelText: 'Email', prefixIcon: Icon(CupertinoIcons.at)),
                ),
                SizedBox(
                  height: 10,
                ),
                TextField(
                  decoration: InputDecoration(
                      labelText: 'Password',
                      prefixIcon: Icon(CupertinoIcons.lock)),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(27, 5, 27, 25),
            child: SizedBox(
                width: double.infinity,
                height: 48,
                child: ElevatedButton(onPressed: () {}, child: Text('Save'))),
          )
        ]),
      ),
    );
  }
}
class skill extends StatelessWidget {
  final String imagePath;
  final String titleSkill;
  final Color shadowColor;
  final bool isActiv;
  final Function() onTap;
  const skill({
    Key? key,
    required this.imagePath,
    required this.titleSkill,
    required this.shadowColor,
    required this.isActiv,
    required this.onTap,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      borderRadius: BorderRadius.circular(12),
      onTap: onTap,
      child: Container(
        width: 110,
        height: 110,
        decoration: isActiv
            ? BoxDecoration(
                color: Theme.of(context).dividerColor,
                borderRadius: BorderRadius.circular(12))
            : null,        
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              decoration: isActiv
                  ? BoxDecoration(boxShadow: [
                      BoxShadow(
                          color: shadowColor.withOpacity(0.5), blurRadius: 20)
                    ])
                  : null,
              child: Image.asset(
                imagePath,
                width: 40,
                height: 40,
              ),
            ),
            Text(titleSkill)
          ],
        ),
      ),
    );
  }
}
class MyAppThemeConfig {
  static const String faPrimaryFontFamily="IranYekan";
  final Color primaryColor = Colors.pink.shade400;
  final Color primaryTextColor;
  final Color secondaryTextColor;
  final Color surfaceColor;
  final Color backgroundColor;
  final Color appBarColor;
  final Brightness brightness;
  MyAppThemeConfig.dark()
      : primaryTextColor = Colors.white,
        secondaryTextColor = Colors.white70,
        surfaceColor = Colors.white70,
        backgroundColor = Colors.black,
        appBarColor = Colors.black,
        brightness = Brightness.dark;
  MyAppThemeConfig.light()
      : primaryTextColor = Colors.grey.shade900,
        secondaryTextColor = Colors.grey.shade900.withOpacity(0.8),
        surfaceColor = Color(0x0d000000),
        backgroundColor = Colors.white,
        appBarColor = Color.fromARGB(255, 235, 235, 235),
        brightness = Brightness.light;
  ThemeData getTheme(String languageCode) {
    return ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a blue toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        primarySwatch: Colors.pink,
        primaryColor: primaryColor,
        brightness: brightness,
        dividerColor: surfaceColor,
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(primaryColor)),
        ),
        scaffoldBackgroundColor: backgroundColor,
        appBarTheme: AppBarTheme(
            elevation: 0,
            backgroundColor: appBarColor,
            foregroundColor: primaryTextColor),
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide.none,
          ),
          filled: true,
          fillColor: surfaceColor,
        ),
        textTheme: languageCode=='en'?enPrimaryTextTheme
        :faPrimaryTextTheme,
        );
  }
  TextTheme get enPrimaryTextTheme => GoogleFonts.latoTextTheme(TextTheme(
            bodyMedium: TextStyle(fontSize: 15, color: primaryTextColor,),
            bodyLarge: TextStyle(fontSize: 14, color: secondaryTextColor),
            bodySmall: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: primaryTextColor),
            titleMedium: TextStyle(
                fontWeight: FontWeight.bold, color: primaryTextColor)));
  TextTheme get faPrimaryTextTheme => TextTheme(
            bodyMedium: TextStyle(fontSize: 15, color: primaryTextColor, fontFamily: faPrimaryFontFamily),
            bodyLarge: TextStyle(fontSize: 14, color: secondaryTextColor, fontFamily: faPrimaryFontFamily),
            bodySmall: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: primaryTextColor, fontFamily: faPrimaryFontFamily),
            titleMedium: TextStyle(
                fontWeight: FontWeight.bold, color: primaryTextColor, fontFamily: faPrimaryFontFamily));
}
enum _skillType { photoshop, adobeXd, illustratar, afterEffect, lightroam }
محمد نوری ۱۴ مرداد ۱۴۰۲، ۱۴:۲۴

سلام و درود

از خروجی که مشاهده می‌کنید عکس ارسال کنید تا تفاوتی که منظورتون هست رو متوجه بشم.

امیررضا بشیری ۱۵ مرداد ۱۴۰۲، ۱۰:۲۶