ronjb / float_column Goto Github PK
View Code? Open in Web Editor NEWFlutter FloatColumn widget for building a vertical column of widgets and text where the text wraps around floated widgets, similar to how CSS float works.
License: MIT License
Flutter FloatColumn widget for building a vertical column of widgets and text where the text wraps around floated widgets, similar to how CSS float works.
License: MIT License
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),
),
],
),
Thanks for creating this package it's a masterpiece.
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.
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,
),
],
),
);
}
}
We need to add a SelectableText widget to the WrappableText widget.
Currently it is impossible to make the text selectable.
Currently:
WrappableText( text: TextSpan(children: [ ... ]) ),
Needed:
WrappableText( text: SelectableText.rich(TextSpan(children: [ ... ])) ),
https://api.flutter.dev/flutter/material/SelectableText/SelectableText.rich.html
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)?
is there a way to set max lines for WrappableText?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.