Home > Mobile >  Change colors of IconButton
Change colors of IconButton

Time:02-11

I have the following widget implemented:

TextFormField(
                  controller: _loginPageViewModel.passwordTEC,
                  obscureText: true,
                  decoration: InputDecoration(
                    hintText: S.of(context).password,
                    suffixIcon: IconButton(
                      onPressed: _loginPageViewModel.passwordTEC.clear,
                      icon: const Icon(Icons.clear),
                    ),
                  ),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return S.of(context).passwordValidation;
                    }
                    return null;
                  },
                )

At the same time I'm implementing ThemeData. I managed to changed the border color of InputDecoration, whether the TextFormField has focus or not, but the color of suffixIcon is different. Which parameters of ThemeData are connected to the color of the suffixIcon, both in normal state and when in focus? Cheers

CodePudding user response:

Here is the code for what you want to achieve:

You need to implement ThemeData with copyWith for that.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData().copyWith(
        scaffoldBackgroundColor: Colors.white,
        colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.green),
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const TextField(
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.lock_outline),
        hintText: 'Username',
      ),
    );
  }
}

Hope it will helps you. Do let me know if you get any problem.

Thank you :)

CodePudding user response:

Try this

theme: ThemeData().copyWith( colorScheme: ThemeData().colorScheme.copyWith( primary: Colors.green, ), ),

  • Related