Saturday, April 24, 2021

expanded widget to adjust the widget size and flex to adjust the multiple widgets screen ratio percentage

 https://docs.flutter.io/flutter/widgets/Expanded0class.html

prividing width to image will work but it is hard coded.

width: 200.0,


Instead keep image widget in expanded widget.


if 2 expanded widgets are there.then the screen will be equally shared.

if we want to change the sharing percentage, we can do with flex property. flex: 1 and 2 for two widgets will make the one with 2 will take twice share.

Like in bootsrap screen ratio.


to add space between two expanded widgets..

padding.


Exapanded(

child: Padding(

padding: onst EdgeInsets.all(16.0),

child:Image.asset('images/dice1.png'),

),

)

image: AssetImage or Image.asset --> both are used here, just check the widgets code.



import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: Text('Dicee'),
          backgroundColor: Colors.red,
        ),
        body: DicePage(),
      ),
    ),
  );
}

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          //flex: 4,
          child: Image(
            //width: 200.0,

            image: AssetImage('images/dice1.png'),
          ),
        ),
        Expanded(
          //flex: 2,
          child: Image.asset(
            'images/dice1.png',
          ),
        ),
      ],
    );
  }
}

No comments:

Post a Comment