Search code examples
androidflutterwidth

How can I set widths with weights in Flutter?


I want to show a card that has a picture and title like this:

enter image description here

but the result is wrong:

enter image description here

I don't know how can I set widgets widths with weights in android, I want to set weight=1 for the image and match_parent for other section.
this my code, where is my mistake? please correct the code.

import 'package:flutter/material.dart';

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => new _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List widgets = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 100; i++) {
      widgets.add(getRow(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new ListView(children: widgets),
    );
  }

  Widget getRow(int i) {
    return new GestureDetector(
      child: new Card(
        child: new Padding(
          padding: new EdgeInsets.all(10.0),
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Padding(
                padding: new EdgeInsets.all(10.0),
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    new Text("عنوان کتاب$i",
                      style: new TextStyle(fontFamily: 'IranSans',
                          fontSize: 16.0,
                          color: new Color.fromARGB(1, 0, 0, 1)),),
                    new Text("این نسخه صرفا برای تست برنامه است. $i",
                      style: new TextStyle(fontFamily: 'IranSans',
                          fontSize: 14.0,
                          color: new Color.fromARGB(0, 1, 0, 1)),),
                  ],
                ),
              ),
              new Image.asset("images/default_cover.jpg",),
            ],
          ),
        ),
      ),
      onTap: () {
        setState(() {
          widgets = new List.from(widgets);
          widgets.add(getRow(widgets.length + 1));
          print('row $i');
        });
      },
    );
  }
}

Solution

  • import 'package:flutter/material.dart';
    
    void main() => runApp(
          new MaterialApp(
            debugShowCheckedModeBanner: false,
            home: new HomePage(),
          ),
        );
    
    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => new _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Home'),
          ),
          body: new Card(
            child: new Container(
              alignment: Alignment.topRight,
              padding: const EdgeInsets.all(10.0),
              child: new FittedBox(
                child: new Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        new Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 8.0),
                          child: new Text('Title', style: new TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),),
                        ),
                        new Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 8.0),
                          child: new Text('Description', style: new TextStyle(fontSize: 20.0),),
                        ),
                      ],
                    ),
                    new Placeholder(fallbackWidth: 150.0, fallbackHeight: 200.0,)
                  ],
                ),
              ),
            ),
          )
        );
      }
    }
    

    Replace Placeholder with required image widget. Hope this helps!