title: Flutter/Dart - Dynamic font size to fit Card
body: <p>I am trying to create some ocassion cards inside a pageview and was wondering if there was a way to make my fontsize dynamic to avoid pixel overflow. Here is a screenshot of a card that works fine:</p>
  <p><a href="https://i.stack.imgur.com/l63M4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l63M4.png" alt="enter image description here" /></a></p>
  <p>But when I add an occasion that has more characters...</p>
  <p><a href="https://i.stack.imgur.com/iBl1s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iBl1s.png" alt="enter image description here" /></a></p>
  <p>Here is my code:</p>
  <pre><code>class Category {
  String name;
  IconData icon;
  Widget route;
  Category(this.name, this.icon, this.route);
  }
  
  class CalendarEvents {
    String title;
    String date;
  
    CalendarEvents(this.title, this.date);
  }
  
  class AccountPage extends StatefulWidget {
  
    @override
    _AccountPageState createState() =&gt; _AccountPageState();
  }
  
  class _AccountPageState extends State&lt;AccountPage&gt; {
    List&lt;Category&gt; _categories = [
      Category('My History', Icons.history, MyHistory()),
      Category('Dates to Remember', Icons.event_note, DatesToRemember()),
      Category('Terms and Conditions', Icons.assignment, TermsandConditions()),
      Category('Privacy Notice', Icons.security, PrivacyNotice()),
      Category('Rate us' , Icons.stars, RateUs()),
      Category('Send us Feedback' , Icons.feedback, GiveUsFeedback())
    ];
  
  
  
    DateFormat formatter = DateFormat('dd/MM/yyyy');
  
  
    List&lt;CalendarEvents&gt; _events = [
      CalendarEvents('Christmas Day', &quot;25/12/2020&quot;),
      CalendarEvents('New Years Eve', &quot;31/12/2020&quot;),
      CalendarEvents('New Years Day',&quot;01/01/2021&quot;),
      CalendarEvents('Valentines Day', &quot;14/02/2021&quot;),
      CalendarEvents('A very long occasion that needs to be resized','01/01/2021')
    ];
  
    int _index = 0;
  
    @override
    Widget build(BuildContext context) {
      return  SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
        Container(
          child: SizedBox(
          height: 75, // card height
            child: PageView.builder(
              itemCount: _events.length,
              controller: PageController(viewportFraction: 0.5),
              onPageChanged: (int index) =&gt; setState(() =&gt; _index = index),
              itemBuilder: (_, i) {
                return Transform.scale(
                  scale: i == _index ? 1 : 0.5,
                  child: Card(
                    elevation: 6,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(formatter.parse(_events[i].date).day.toString()),
                        Text(DateFormat.MMMM().format(formatter.parse(_events[i].date)).toString()),
                        Text(
                          _events[i].title,
                          style: AppBarTextStyle,
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ),
  //          SizedBox(height: 100.0,),
            Container(
              height: MediaQuery.of(context).size.height * 0.7,
              child: ListView.builder(
                itemCount: _categories.length,
                itemBuilder: (context, index) {
                  return Column(
                    children: &lt;Widget&gt;[
                      ListTile(
                        leading: Icon(_categories[index].icon, color: Colors.black,),
                        title: Text(_categories[index].name),
                        trailing: Icon(Icons.arrow_forward_ios),
                        onTap: () =&gt; Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; _categories[index].route)),
                      ),
                      Divider(), //                  
                    ],
                  );
                }),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <p>It would be useful to resize the font depending on the length of occasion. If this is possible, what would be the best way of achieving these results? Thanks</p>