Responsive Text Widget
responsive_text_widget
Flutter package to make your texts Responsive. The Package will Assist you to calculate size of texts. Prevents text overflow without explicitly setting a fixed font size. ✨
It's support any type of texts you want to show such as [ headline, bodytext, subtitle text or caption text], etc.
Create a new project with the command
flutter create MyApp
Add
responsive_text_widget: ...
to your pubspec.yaml
of your flutter project. OR run
flutter pub add responsive_text_widget
in your project's root directory.
In your library add the following import:
import 'package:responsive_text_widget/responsive_text_widget.dart';
For help getting started with Flutter, view the online documentation.
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive Text',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Responsive Text Widget"),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Row(
children: [
Expanded(
child: ResponsiveText(
text: "Responsive Text",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 15,
fontFamily: "open sans",
),
),
),
Expanded(
child: ResponsiveText(
text:
"Flutter package to make your texts Responsive. The Package will Assist you to calculate size of texts.",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
)
],
),
const SizedBox(height: 30),
TextButton(
child: const ResponsiveText(
text: "Text Button",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.orange,
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
onPressed: () async {},
)
],
),
),
),
);
}
}
Parameter | Default | Description | Required |
---|---|---|---|
text | - | Text widget required text | True |
textStyle | const TextStyle(color: Colors.black) | Style properties for text style | false |
textAlign | TextAlign.center | Align the text on the left right, center, top edge | false |
textOverflow | TextOverflow.visible | Clip the overflowing text to fix its container. | false |
Run this command:
With Flutter:
$ flutter pub add responsive_text_widget
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
responsive_text_widget: ^0.0.1
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:responsive_text_widget/responsive_text_widget.dart';
import 'package:flutter/material.dart';
import 'package:responsive_text_widget/responsive_text_widget.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive Text',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Responsive Text Widget"),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Row(
children: [
Expanded(
child: ResponsiveText(
text: "Responsive Text",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 15,
fontFamily: "open sans",
),
),
),
Expanded(
child: ResponsiveText(
text:
"Flutter package to make your texts Responsive. The Package will Assist you to calculate size of texts.",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
)
],
),
const SizedBox(height: 30),
TextButton(
child: const ResponsiveText(
text: "Text Button",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.orange,
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
onPressed: () async {},
)
],
),
),
),
);
}
}
Download details:
Author: hello-addweb