我想让我的代码响应任何屏幕尺寸 flutter dart

Question

i want to make my application responsive to any screen size by the way i tried to use flexible Mediaquery and make my code on a container That i put it inside a row

but when i Try It on my mobile phone It look supper Nice and in another phones It look So Bad and big so how can i make it responsive with any screen size, ps: when i debug it in any scren it look nice but when i releasse it to convert it to apk and try it to another phone it look so bad and not responsive

 import 'package:ecofun_ui/screens/details_screen.dart'; import 'package:ecofun_ui/widget/category-card.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'slide.dart'; import 'package:auto_size_text/auto_size_text.dart'; //import 'package:bubble_bottom_bar/bubble_bottom_bar.dart'; void main() { runApp(MaterialApp( theme: ThemeData(primarySwatch: Colors.deepOrange), debugShowCheckedModeBanner: false, home: SplashPage(duration: 3, goToPage: WelcomePage()))); } //start the splash page class SplashPage extends StatelessWidget { int duration = 0; Widget goToPage; SplashPage({this.goToPage, this.duration}); @override Widget build(BuildContext context) { Future.delayed(Duration(seconds: this.duration), () { Navigator.push( context, MaterialPageRoute(builder: (context) => this.goToPage)); }); return Scaffold( body: Container( color: Colors.deepOrange, alignment: Alignment.center, child: LogoWhite())); } } //the end of splashpage screen //start the welcome screen class WelcomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Column(children: <Widget>[ Flexible( child: FractionallySizedBox( heightFactor: 1, widthFactor: 1, child: Container( color: Colors.white, child: LayoutBuilder( builder: (ctx, constraints) { return Column(children: <Widget>[ SizedBox( height: constraints.maxHeight * 0.15, ), Text('E c o F u n', textAlign: TextAlign.center, style: TextStyle( color: Colors.blueGrey, fontSize: 60, fontWeight: FontWeight.w900)), SizedBox( height: constraints.maxHeight * 0.1, ), Padding( padding: EdgeInsets.all(10), child: FlatButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => HomeScreen())); }, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(50)), color: Colors.deepOrange, padding: EdgeInsets.only( top: 15, bottom: 15, left: 70, right: 70), child: AutoSizeText( ' نادي الرقي ', style: TextStyle(fontSize: 28, color: Colors.white), maxLines: 1, ), )), Container( margin: EdgeInsets.all(15), child: ClipRRect( borderRadius: BorderRadius.circular(50), child: Material( color: Colors.transparent, child: InkWell( splashColor: Colors.deepOrange.withOpacity(0.2), highlightColor: Colors.deepOrange.withOpacity(0.2), onTap: () {}, child: Container( padding: EdgeInsets.only( right: 70, left: 70, top: 15, bottom: 15), child: AutoSizeText( 'حساب المعدل', style: TextStyle( fontSize: 28, color: Colors.deepOrange), maxLines: 1, ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(50), color: Colors.transparent, border: Border.all( color: Colors.deepOrange, width: 3, )), ), )))), Container( height: constraints.maxHeight * 0.3, decoration: BoxDecoration( color: Colors.transparent, image: DecorationImage( image: AssetImage("images/teamspirit.gif"), fit: BoxFit.fitWidth)), ), Column( children: [ Container( height: constraints.maxHeight * 0.01, width: constraints.maxWidth * 0.2, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10), ), ), SizedBox( height: constraints.maxHeight * 0.02, ), AutoSizeText( 'All right reserved for EcoClub\n Devlopped by Imen Lakrib', style: TextStyle(fontSize: 15, color: Colors.black), maxLines: 2, ), ], ) ]); }, ), ), ), ) ])); } //the end of welcome screen } class LogoWhite extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 400, height: 200, child: Image.asset( "images/logowhite.png", //fit: BoxFit.cover, )); } } // onboarding class with widgets class HomeScreen extends StatefulWidget { @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { int _currentPage = 0; PageController _controller = PageController(); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( backgroundColor: Color(0xFF3084AC), body: Container( margin: EdgeInsets.only(top: 500 / 100), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(40), topRight: Radius.circular(40))), child: Stack( children: [ // Pageview PageView.builder( scrollDirection: Axis.horizontal, onPageChanged: _onchanged, controller: _controller, itemCount: _pages.length, itemBuilder: (context, int index) { return _pages[index]; }), Column( mainAxisAlignment: MainAxisAlignment.end, children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: List<Widget>.generate(_pages.length, (int index) { return AnimatedContainer( duration: Duration(milliseconds: 300), height: 6, width: (index == _currentPage)? 20: 10, margin: EdgeInsets.symmetric(horizontal: 5, vertical: 30), decoration: BoxDecoration( borderRadius: BorderRadius.circular(5), color: (index == _currentPage)? Colors.blue: Colors.orange), ); }), ), InkWell( onTap: () { _controller.nextPage( duration: Duration(milliseconds: 800), curve: Curves.easeInOutQuint); }, child: AnimatedContainer( alignment: Alignment.center, duration: Duration(milliseconds: 300), height: 44, width: 217, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(15), boxShadow: [ BoxShadow( color: Color(0xFF263238).withOpacity(0.5), blurRadius: 4, spreadRadius: 1) ]), child: (_currentPage == (_pages.length - 1))? Text( "Get Started", style: TextStyle( color: Colors.white, fontSize: 20, ), ): Text( "Next", style: TextStyle( color: Colors.white, fontSize: 20, ), )), ), SizedBox( height: 11, ), SizedBox( height: 15, ), ], ) ], ), ), ), ); } // generate Page View List<Widget> _pages = [ SliderPage( title: "من نحن", descreption: "أول نادي ثقافي علمي بجامعة الجزائر 3 \n تم انشاءه من قبل طلبة اختلفت افكارهم \n واجتمع حب المبادرة لديهم والرغبة في التغيير \n وترك الاثر في الجامعة", beginColor: Color(0xFFB6E3F3), endColor: Color(0xFF061922), bgscreen: "images/screen_1.png", ), SliderPage( title: "اهدافنا", descreption: "مرافقة الطالب وتشجيعه وتحفيزه لان يكون \n طالبا مثقفا ملما بتخصصه او بما له صلة به ", beginColor: Color(0xFFB469EC), endColor: Color(0xFF3E165B), bgscreen: "images/screen_2.png", ), SliderPage( title: "رؤيتنا", descreption: "تاهيل وتجهيز الطالب للحياة المهنية \n ليكون مسلحا بالمهارات التي يطلبها سوق العمل", beginColor: Color(0xFF79E69F), endColor: Color(0xFF136A33), bgscreen: "images/screen_3.png", ), SliderPage( title: "شعارنا", descreption: "رسخ فكرة.. جسد عملا.. اترك اثرا", beginColor: Color(0xFF79E69F), endColor: Color(0xFF136A33), bgscreen: "images/screen_5.png", ), SliderPage( title: "انظم لنا", descreption: "ان كنت طالبا تزاول دراستك حاليا \n باحدى كليات جامعة الجزائر 3 \n ماعليك الا مراسلتنا على مختلف صفحاتنا", beginColor: Color(0xFF79E69F), endColor: Color(0xFF136A33), bgscreen: "images/screen_4.png", ) ]; _onchanged(int index) { setState(() { _currentPage = index; }); } } //the end of onboarding class with widgets // calcsecreen start class CalcScreen extends StatelessWidget { @override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; return Scaffold( //bottomNavigationBar: BubbleBottomBar(), body: Stack( children: <Widget>[ Container( height: size.height * 1, decoration: BoxDecoration( color: Colors.orange, image: DecorationImage( alignment: Alignment.centerLeft, image: AssetImage("images/bgorange.png"))), ), SafeArea( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ SizedBox( height: 25, ), Text( 'مرحبا بكم في \n برنامج حساب المعدلات', textAlign: TextAlign.center, style: Theme.of(context).textTheme.display1.copyWith(fontWeight: FontWeight.w900), ), SizedBox( height: 30, ), Expanded( child: GridView.count( crossAxisCount: 2, childAspectRatio: 1, crossAxisSpacing: 20, mainAxisSpacing: 20, children: <Widget>[ CategoryCard( title: 'ماستر 1', image: "images/M1.png", press: () { Navigator.push( context, MaterialPageRoute(builder: (context) { return FifthYear(); }), ); }, ), CategoryCard( title: 'ماستر 2', image: "images/M2.png", press: () { Navigator.push( context, MaterialPageRoute(builder: (context) { return FordYear(); }), ); }, ), CategoryCard( title: '1 ليسانس', image: "images/L1.png", press: () { Navigator.push( context, MaterialPageRoute(builder: (context) { return SecondS1(); }), ); }, ), CategoryCard( title: '2 ليسانس', image: "images/L2.png", press: () { Navigator.push( context, MaterialPageRoute(builder: (context) { return SecondYear(); }), ); }, ), CategoryCard( title: '3 ليسانس', image: "images/L3.png", press: () { Navigator.push( context, MaterialPageRoute(builder: (context) { return ThirdYear(); }), ); }, ), ], )) ], ), )) ], )); } } // calcsecreen end

Answer 1

You can use flutter_screenutil package, for responsive font you can use like this

   Text(
     '16sp, will not change with the system.',
      style: TextStyle(
        color: Colors.black,
        fontSize: 16.sp, // this will make font responsive
      ),
    ),

for responsive UI you can use like this

//for example:

///If you want to display a square:
///The UI may show a rectangle:
Container(
   width: 375.w,
   height: 375.h,
 ),
            
////If you want to display a square:
Container(
  width: 300.w,
  height: 300.w,
),

or

Container(
  width: 300.r,
  height: 300.r,
),

Or you can identify device type with below code

  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 650;

  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width < 1100 &&
      MediaQuery.of(context).size.width >= 650;

  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1100;