Flutter - Wrap column around image

306

Yes, it is now possible, like this:

import 'package:float_column/float_column.dart';

FloatColumn(
  children: const [
    Floatable(
      float: FCFloat.start,
      maxWidthPercentage: 0.25,
      padding: EdgeInsetsDirectional.only(end: 12),
      child: FlutterLogo(size: 100),
    ),
    WrappableText(
        text: TextSpan(
            text: 'BIG TITLE',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))),
    WrappableText(
        text: TextSpan(
            text: 'Little subtitle',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold))),
    WrappableText(
        text: TextSpan(
            text:
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed erat efficitur, tincidunt purus ut, fermentum erat. Morbi vitae nulla lorem. Ut ac velit tempus, semper ante quis, iaculis nibh. Suspendisse potenti.')),
  ],
)

Which will look like this: enter image description here

Share:
306
Naografix
Author by

Naografix

Updated on December 24, 2022

Comments

  • Naografix
    Naografix over 1 year

    I just want to know if in Flutter it's possible to wrap a entire column around my image like this:

    1

    I found DropCrapText but I only can wrap a text with a child (image in my case).

    Container(
        child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Image.network(
          'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png',
          width: 120,
          height: 120,
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("BIG TITLE", style: TextStyle(fontSize: 25)),
              Text("Little subtitle", style: TextStyle(fontSize: 18)),
              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.",
                  style: TextStyle(fontSize: 20)),
            ],
          ),
        )
      ],
    )
    

    Thank you

    • 0x4b50
      0x4b50 over 3 years
      do you have some code you can share with us?
    • Patrick
      Patrick over 3 years
      It may be possible with a WebView.