How To Create Checkbox With Background Color In Flutter

admin_img Posted By Bajarangi soft , Posted On 05-10-2020

Checkbox background color is the filled background color which shows when checkbox is checked. The background color will be only visible to mobile screen on checkbox selection. In flutter the Checkbox widget has a property named as activeColor which supports all type of color formats. So in this tutorial we would learn about Flutter Change Checkbox Background Color Android.

How To Create Checkbox With Background Color In Flutter

Complete Code For Chexkbox With Background Color In Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool checkbox1 = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Color(0xFFFFC107),
        title: Text('CheckBox With Background Color'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Container(
          child: Row(children: [
            SizedBox(
              width: 10,
              child: Checkbox(
                value: checkbox1,
                activeColor:Color(0xFFFFC107),
                onChanged: (value) {
                  //value may be true or false
                  setState(() {
                    checkbox1 = !checkbox1;
                  });
                },
              ),
            ),
            SizedBox(width: 10.0),
            Text('This is Checkbox ')
          ]),
        ),
      ),
    );
  }
}

Related Post