Flutter - cannot use Flexible inside Padding for text wrapping purpose
In my flutter app, I want to have a card and four boxes aligned horizontally with equal width and height inside it. Code follows ;
@override
Widget bui
-
try
textAlign: TextAlign.center,inside text Widget讨论(0) -
Please try this...
@override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: SingleChildScrollView( child: Column( children: <Widget>[ Card( margin: EdgeInsets.all(10), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Container( width: MediaQuery.of(context).size.width, color: Colors.blue, child: Padding( padding: const EdgeInsets.all(8.0), child: Text( "Online Pharmacy", style: TextStyle(fontSize: 16, color: Colors.white), ), ), ), Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), ], ) ], ), ), Card( margin: EdgeInsets.all(10), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Container( width: MediaQuery.of(context).size.width, color: Colors.blue, child: Padding( padding: const EdgeInsets.all(8.0), child: Text( "Online Pharmacy", style: TextStyle(fontSize: 16, color: Colors.white), ), ), ), Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), ], ) ], ), ), Card( margin: EdgeInsets.all(10), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Container( width: MediaQuery.of(context).size.width, color: Colors.blue, child: Padding( padding: const EdgeInsets.all(8.0), child: Text( "Online Pharmacy", style: TextStyle(fontSize: 16, color: Colors.white), ), ), ), Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), ], ) ], ), ), Card( margin: EdgeInsets.all(10), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Container( width: MediaQuery.of(context).size.width, color: Colors.blue, child: Padding( padding: const EdgeInsets.all(8.0), child: Text( "Online Pharmacy", style: TextStyle(fontSize: 16, color: Colors.white), ), ), ), Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), ], ) ], ), ), Card( margin: EdgeInsets.all(10), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Container( width: MediaQuery.of(context).size.width, color: Colors.blue, child: Padding( padding: const EdgeInsets.all(8.0), child: Text( "Online Pharmacy", style: TextStyle(fontSize: 16, color: Colors.white), ), ), ), Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10), width: 2, height: 70, color: Colors.grey, ), Expanded( child: Container( child: Center( child: Container( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( children: <Widget>[ FlutterLogo( size: 50, ), SizedBox( height: 10, ), //Image.asset("images/medicine.jpg"), Text('Picture of your Prescription', textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 14)), ], mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, ), ), ), ), ), ), ], ) ], ), ), ], ), ))); }Just copy paste code and see what happening... May this will help you.
讨论(0) -
That my approach to what you need:
Padding( padding: const EdgeInsets.all(8.0), child: Material( elevation: 5.0, child: Container( // height: 220, child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( padding: EdgeInsets.symmetric(horizontal: 8.0), height: 25, color: Color(0xff6898F7), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( 'Online Pharmacy', style: TextStyle( color: Color(0xffffffff), ), ), Text( 'your hidden text lol', style: TextStyle( color: Color(0xffffffff), ), ), ], ), ), Container( height: 150.0, child: Row( children: <Widget>[ Expanded( child: Container( padding: EdgeInsets.all(8.0), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ // you could use icon instead of image // Container( // height: 80, // child: Image.asset( // "images/medicine.jpg", // fit: BoxFit.fill, // ), // ), Icon( Icons.touch_app, size: 40.0, ), SizedBox(height: 10.0), Flexible( child: Text( 'Browse Through Database', textAlign: TextAlign.center, )) ], ), ), ), Expanded( child: Container( padding: EdgeInsets.all(8.0), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ // you could use icon instead of image // Container( // height: 80, // child: Image.asset( // "images/medicine.jpg", // fit: BoxFit.fill, // ), // ), Icon( Icons.input, size: 40.0, ), SizedBox(height: 10.0), Flexible( child: Text( 'Type your own medicine', textAlign: TextAlign.center, )) ], ), ), ), Expanded( child: Container( padding: EdgeInsets.all(8.0), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ // you could use icon instead of image // Container( // height: 80, // child: Image.asset( // "images/medicine.jpg", // fit: BoxFit.fill, // ), // ), Icon( Icons.image, size: 40.0, ), SizedBox(height: 10.0), Flexible( child: Text( 'Picture of your prescription', textAlign: TextAlign.center, )) ], ), ), ), ], ), ), ], )), ), )讨论(0)
加载中...
- 热议问题