CODEWITHSUNDEEP
flutter
Albert Samvelyan
Albert Samvelyan

Reputation: 1

Flutter: Dynamically change widgets size in appBar

I am trying to do the following: I want to change sizes of appBar title and widgets in actions[...] dynamically when the size of appBar itself is being changed. I want to set the width of the title to be 75% and width of a widget(a raised button) in actions to be 30% of the width of appBar itself and when the size of appBar is changed (For example when I make it bigger or smaller when pulling the app window with mouse), I want the sizes(width in this case) of title and the mentioned widget(the raised button) to change accordingly.

I tried to use:

  1. child: ButtonTheme( minWidth: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, ),
  2. minWidth: AppBar().preferredSize.width
  3. Flexible widget
  4. Expanded widget
  5. FractionallySizedBox. ...e.t.c

but i couldn't achieve the above mentioned behavior.

Take into consideration the simplest appBar example:

/// Flutter code sample for AppBar
import 'package:flutter/material.dart';

void main() => runApp(const AlbertsApp());

/// This is the main application widget.
class AlbertsApp extends StatelessWidget {
  const AlbertsApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Alberts trial AppBar'),
        actions : <Widget> [
          RaisedButton (
            child: Text('Hi'),
            color: Colors.red,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a TonysChoocolonely')));
            },
          ),
          RaisedButton (
            child: Text('Bye'),
            color: Colors.green,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a KitKat')));
            },
          ),
          RaisedButton (
            child: Text('Third'),
            color: Colors.yellow,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a PeanutButter')));
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'This Is The Home Page Itself',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Here at any moment, when the appBar size is being changed, I want the title and raised buttons' sizes to change accordingly. For example, at any moment, when appBar width becomes 'x', i want the title width to become 'x * 70 / 100', and width of every raised button to become 'x * 30 / 100'.

Upvotes: 0

Views: 784

Answers (1)

chichi
chichi

Reputation: 3302

I had the same problem and how I did was just getting rid of the actions and use the Row() widget in the body:. Then divide the widget with Container

  body: const Row(
    children: [
        Container(width: MediaQuery.of(context).size.width * 0.15) //Container 1
        Container(width: MediaQuery.of(context).size.width * 0.70) //Container 2
        Container(width: MediaQuery.of(context).size.width * 0.15) //Container 3
    ]
  ),

Then the size will be set as you wish the divide them into. You can add Text() to Container2 and all your buttons to Container1. Or, you can set different size and use like mainAxis to the Row() widget.

But just make sure you kinda have three containers or add sizedbox to even out with the first container in order to make the 2nd container in the centre centre!

Upvotes: 0

Related Questions