Using Wrap widget with text

Question

I'm trying to replicate this design.

SizedBox(
  width: 330.w,
  child: Wrap(
    children: [
      Transform.scale(
        scale: 1.3,
        child: Checkbox(
          value: false,
          side: const BorderSide(width: 1),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(3.r),
          ),
          onChanged: (bool? value) {},
        ),
      ),
      const Text('Nullam quis risus eget urna mollis ...'),
    ],
  ),
)

Since I want the text to wrap and flow downward, I used the Wrap widget. But the Text widget does not start from the same level as the checkbox. It looks like this.

Is there a different way to achieve this?

Answer 1

You can try RichText, WidgetSpan and TextSpan

There is a code example:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            color: Colors.white,
            child: RichText(
              text: TextSpan(
                children: [
                  WidgetSpan(
                    child: SizedBox(
                        height: 20,
                        width: 20,
                        child: Checkbox(
                          value: false,
                          side: const BorderSide(width: 1),
                          onChanged: (bool? value) {},
                        )),
                  ),
                  const TextSpan(
                    text:
                        " Nullam quis risus get urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Done ullamcorper nulla non metus auctor fringilla.",
                  ),
                ],
              ),
            )));
  }
}

It will be like

Answer 2

This is not exactly the same design, but the code is quite simple:

CheckboxListTile(
    title: const Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
    value: false,
    onChanged: (newValue) { },
    controlAffinity: ListTileControlAffinity.leading,
)

It looks like:

Answer 3

you could indent your initial line of text with some spaces then use the STACK widget to layer the checkbox on top of your text widget, STACK allows positioning also