How To Change Check Mark Color Checkbox Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

I need to change check mark color of the checkbox in the flutter and there is no parameter is given to change color in Checkbox.

How To Change Check Mark Color Checkbox Using Flutter App

Change Check Mark Color Checkbox
Complete Code For Change Check Mark Color Checkbox In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({this.title});
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>{
  bool _isChecked = true;
  List<Color> _colors = [
    Colors.orange[200],
    Colors.pink[100],
    Colors.teal[100],
    Colors.red[300],
    Colors.yellow[700]
  ];

  int _currentIndex = 0;

  _onChanged() {
    int _colorCount = _colors.length;

    setState(() {
      if (_currentIndex == _colorCount - 1) {
        _currentIndex = 0;
      } else {
        _currentIndex += 1;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text("Change Check Mark Color Checkbox"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: Row(
                children: <Widget>[
                  Checkbox(
                    value: _isChecked,
                    activeColor: Colors.amber,
                    checkColor: _colors[_currentIndex],
                    onChanged: (bool val) => setState(() => _isChecked = val),
                  ),
                  SizedBox(width: 12.0),
                  Text("Checkbox Text"),
                ],
              ),
            ),
          ),
          Expanded(
            child: Center(
              child: RaisedButton(
                onPressed: _onChanged,
                child: Text("Change Color"),
                color: Colors.amber,
                textColor: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Related Post