How to show Checkbox at Right side of Text - Flutter

Published March 17, 2020

In this post we are going to leanr how to show checkbox at right side of text in flutter.

 

Let's Start

Step 1: Create flutter application

Step 2: Create CheckBoxRightSide dart file and add below code

import 'package:flutter/material.dart';

class CheckBoxRightSide extends StatefulWidget {
  @override
  CheckBoxRightSideState createState() {
    return new CheckBoxRightSideState();
  }
}

class CheckBoxRightSideState extends State<CheckBoxRightSide> {
  bool _isChecked = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Checkbox in Right Side "),
      ),
      body: Center(
        child: Container(
          margin: EdgeInsets.all(8),
          decoration: BoxDecoration(border: Border.all(
            color: Colors.pink,width: 2
          )),
          child: CheckboxListTile(
            value: _isChecked,
            onChanged: (bool val) => setState(() => _isChecked = val),
            title: Text("Select Text"),
            controlAffinity: ListTileControlAffinity.trailing,
          ),
        ),
      ),
    );
  }
}

 

Step 3: Update main dart file

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink
      ),
      home: CheckBoxRightSide(),
    );
  }

}

 

Step 4: Run application

Check box right side

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

3876 Views