Flutter 文本框内的复选框

Question

I was wondering how I could recreate the Samsung Notes App. To be more precise I want to have the checkbox functionality within the textfield. See picture below:

Thanks for your support!

Answer 1

I've just tried it myself and this looks like how you want it to look:

TextField(
  decoration: InputDecoration(
    prefixIcon: Checkbox(value: value, onChanged: (value) {//bool magic here}),
    hintText: 'TextField'
  ),
),

Check out https://api.flutter.dev/flutter/material/InputDecoration-class.html for more InputDecoration() options to prettify things.

Answer 2

if I understood you correctly you can use Textformfield. You can add the checkbox widget to the textformfield prefix parameter. I hope this gives you an idea and helps.

For Example:

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 
    bool isChecked = false;
    TextEditingController textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: TextField(
          controller:textController,
          style:TextStyle(decoration: isChecked ? TextDecoration.lineThrough : TextDecoration.none),
  decoration: InputDecoration(
    prefixIcon: Checkbox(value:isChecked, onChanged: (value) {
       setState(() { isChecked=value!;});
     
    }),
    hintText: 'To Do'
  ),
          ),
        ),
);
  }
}

Dartpad => https://dartpad.dev/?id=e75b493dae1287757c5e1d77a0dc73f1