Home > Mobile >  How to make my app title and tab labels as large as possible in Flutter
How to make my app title and tab labels as large as possible in Flutter

Time:03-01

I'm making a flutter app which will be used by people with limited vision and I want to make the size of all text as large as fits the view port width up to a specified maximum font size. The actual widths and heights are dynamic so I'd like to use something like media queries to set sane sizes.

Nothing I have tried moves the text size and I can't find any SO answers which help me.

Here's the code I am attempting to use now but it doesn't work.

class HomeTabs extends StatefulWidget {
  const HomeTabs({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => HomeTabsState();
}

class HomeTabsState extends State<HomeTabs> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    User _user = Provider.of<User>(context, listen: false);

    return DefaultTabController(
    
      length: 2,
    
      child: Scaffold(

        drawer: AppDrawer(),
            
        appBar: AppBar(

          toolbarHeight: 100,
            
          iconTheme: IconThemeData(color: iconColor),
            
          backgroundColor: branding,

          centerTitle: true,

          title: FittedBox(

                       fit: BoxFit.contain,
                       
                       child: Text(_user.companyName),

                    ),
            
          bottom: TabBar(
            
            isScrollable: false,
            
            tabs:  [

              SizedBox(

                height: 100,
            
                 child:  Tab( 
                
                    child: FittedBox(

                      fit: BoxFit.contain,
                
                      child: Text( 'Notifications', style: tabStyle))
                
                  ),
              ),

              SizedBox(

                height: 100,

                child:  Tab( 

                  child: FittedBox(

                    fit: BoxFit.contain,
                
                    child: Text( 'Cases', style: tabStyle))
                
                ),
              ),
            ],
          ),
        ),
....
            

CodePudding user response:

Try this For App Bar Size Maintain

PreferredSize(
            preferredSize: Size.fromHeight(100.0), // here the desired height
            child: AppBar(
              centerTitle: true,
              title: Text("Example"),
            )
        )

Result ->enter image description here

CodePudding user response:

for title use Container's constraints like this.

          title: Container(
            constraints: BoxConstraints(
                minWidth: MediaQuery.of(context).size.width - 50),
            child: FittedBox(
              child: Text(
                '_user.companyName',
              ),
            ),
          )

For Tabs just swap FittedBox with Tab.

FittedBox(
                  child: Tab(
                    child: Text(
                      'Cases',
                    ),
                  ),
                ),
  • Related