Макет флаттера - динамический размер c

Question

Я создаю приложение для Web / Android / iOS, используя Flutter. Я не могу по какой-то причине настроить макет так, как я хочу. То, чего я пытаюсь добиться, это:

Играя вокруг, я смог добиться только следующего:

Пожалуйста, посмотрите на мой код и предложите решение, а также лучшие советы по кодированию:

`

//            Page 2 -------------------------------------------------------
            Container(
            color: Color(0xFFE1E1E1),
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            alignment: Alignment.center,
              child: Center(child: AnimatedOpacity(
                  opacity: 1,
                  duration: Duration(milliseconds: 5000),
//  -------------------------- CARD -------------------------------------------
                  child: Container(
                        margin: const EdgeInsets.all(10.0),
                        height: MediaQuery.of(context).size.height * 0.90,
                        width: MediaQuery.of(context).size.width * 0.90,
                        decoration: BoxDecoration(
                            color: Color(0xFFF3F9E4),
                            borderRadius: BorderRadius.all(Radius.circular(30.0)),
                            boxShadow: [BoxShadow(color: Colors.black12,
                            blurRadius: 2, offset: Offset(0,7),
                            spreadRadius: 1)]),
//  -------------------------- CARD CONTENTS -----------------------------------
                    child: Container(margin: const EdgeInsets.all(20.0),
                        child:Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
  //                        Align(alignment: Alignment.topLeft, child: Text("?", textScaleFactor: screenHeight*0.005),),
  //                        Row(children: <Widget>[
  //                          Text("?", textScaleFactor: screenHeight*0.005),
                          Expanded(flex: 3, child: Column(children: <Widget>[
                            Expanded(flex: 1, child: FittedBox(fit:BoxFit.fitWidth, child: Text("هَلْ جَزَاءُ الْإِحْسَانِ إِلَّا الْإِحْسَانُ", style: textStyleUrdu))),
                            Expanded(flex: 2, child: FittedBox(fit:BoxFit.fitWidth, child: Text("Is the reward for good, anything but good?"))),
                            Align(child: Text("Quran  55:60"))])),
                          Expanded(flex: 3, child: Column(children: <Widget>[
                            Expanded(flex: 2, child: FittedBox(fit:BoxFit.fitHeight, child: Text("الَّذِينَ يُنفِقُونَ فِي السَّرَّاءِ وَالضَّرَّاءِ وَالْكَاظِمِينَ الْغَيْظَ وَالْعَافِينَ عَنِ النَّاسِ ۗ وَاللَّهُ يُحِبُّ الْمُحْسِنِينَ", style: textStyleUrdu))),
                            Expanded(flex: 2,child: FittedBox(fit:BoxFit.fitHeight, child: Text("Who spends in the cause of Allah during ease and hardship and who restrain anger and who pardon the people - and Allah loves the doers of good"))),
                            Align(child: Text("Quran 03:134"))])),
                            // Expanded(child: AspectRatio(child: Image.asset("resources/images/icon.png"), aspectRatio: 3))]),
                        Expanded(flex: 4, child: Column(children: <Widget>[
                          Align(child: Text(AppLocalizations.of(context).translate("intro_page2_title"))),
                          Align(child: Text(AppLocalizations.of(context).translate("intro_page2_desc"))),
                          Align(alignment:Alignment.bottomRight ,child: OutlineButton(child: Text("NEXT", style: TextStyle(color: Colors.blueGrey),),
                                onPressed: (){_pageController.animateToPage(2,duration: const Duration(milliseconds: 400),curve: Curves.easeInOut,);}))
                                ]))]
                          )
              )
            )
            ),
            )),

`