FLUTTER: How to set auto font size in TextSpan - flutter

Question

I want to implement that text with divider in between lines:
Smart City Text
Do you guys have any ideas how can I implement that in flutter? I tried few things but it is kind of a challenge for me, because I am beginner. Divider line have to be long as text above and under line.

Answer 1

You can make a screen using auto_size_text package.
Using AutoSizeText and AutoSizeText.rich widget in that package,
and set a maxLines option to 1 and set font size big.
Because we set maxLines to 1, although set font size big, text will not be overflowed screen.
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Container(
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AutoSizeText(
'Smart City',
maxLines: 1,
style: TextStyle(
fontSize: 100,
fontWeight: FontWeight.bold,
),
),
Divider(color: Colors.black),
AutoSizeText.rich(
TextSpan(
children: [
TextSpan(
text: 'Advanced',
),
TextSpan(
text: ' urban',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: ' lighting solution',
),
],
),
style: TextStyle(fontSize: 100),
maxLines: 1,
),
],
),
);
}
}