Code Monkey home page Code Monkey logo

float_column's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

vb10 prasant10050

float_column's Issues

How to counter text overflow when using float columns ?

So, I am trying to create a layout using float columns that looks something like this.

image

The main problem i am facing is the fact that the text overflows inside the given space and create bad ui.

code:

FloatColumn(
              children: [
                // image
                Floatable(
                  float: FCFloat.right,
                  clearMinSpacing: 10,
                  maxWidthPercentage: 0.5,
                  padding: const EdgeInsetsDirectional.all(5),
                  child: CachedNetworkImage(
                    height: Get.height * 0.15,
                    width: double.infinity,
                    fit: BoxFit.cover,
                    imageUrl: "https://picsum.photos/200/300",
                  ),
                ),
                // source and time ago
                Text(
                  '3h ago',
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                        color: Theme.of(context)
                            .textTheme
                            .bodySmall
                            ?.color
                            ?.withOpacity(0.2),
                      ),
                ),
                // description
                Text(
                  "t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like",
                  maxLines: 10,
                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                      fontWeight: FontWeight.bold,
                      overflow: TextOverflow.ellipsis),
                ),
              ],
            ),

The relevant widget overflowing is the one tagged description. I have tried text span and widget span, but they have resulted in the same error.

I am using the package for android platform.

my error

image

Thanks for creating this package it's a masterpiece.

how do you set the height of your image ?

It is unclear how you set the height at which an image appears.

I have played with all of the variables but it's position does not seem to change.
Only the text indents.

Incorrect overflowing text

Example code:

import 'package:flutter/material.dart';
import 'package:float_column/float_column.dart';

const String text =
    '''Once upon a time, in a small town located in the heart of America, there was a young girl named Lily.
She was the daughter of a famous and wealthy businessman, and had everything that anyone could ever want.
However, despite her privileged upbringing, Lily was secretly unhappy and longed for something more.
One day, while browsing in a local bookstore, she came across a dusty old book that caught her eye.
It was a collection of short stories written by an acclaimed author, and Lily knew that she had to have it.
As she reached for the book, she noticed a young man standing beside her, also looking at the same book.
He was handsome and charming, with a mischievous glint in his eye.
"Looks like we both have a good taste in literature," he said, flashing a smile at her.
Lily felt her heart skip a beat. She had never experienced such strong feelings before.
They began to talk and discovered they shared a love of books and a deep sense of adventure.
They decided to go on a spontaneous road trip through the country, exploring new sights and creating incredible memories.
''';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FloatColumn(
        children: [
          Floatable(
              float: FCFloat.start,
              padding: const EdgeInsets.only(right: 5.0),
              child: Image.network(
                  'https://flutter.github.io/assets-for-api-docs/assets/widgets/rich_text.png')),
          RichText(
            text: const TextSpan(text: text),
            maxLines: 8,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}

float_column 1.3.3:
Screenshot_20230512_192500

float_column 2.0.0:
Screenshot_20230512_192641

Does it work with `SliverList`?

Hello. I'm using a SliverList with a SliverChildBuilderDelegate to layout a big list of paragraphs. Is there any way to make float_column work when my floated widget might be taller than a single paragraph (list item)?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.