বিভিন্ন পর্দার আকার অনুসারে কীভাবে ফ্লটার অ্যাপটি প্রতিক্রিয়াযুক্ত করা যায়?


94

বিভিন্ন পর্দার আকার অনুসারে এটিকে প্রতিক্রিয়াশীল করতে আমি অসুবিধার মুখোমুখি হয়েছি। কীভাবে এটি প্রতিক্রিয়াশীল করবেন?

@override
       Widget build(BuildContext context) {
       return new Container(
       decoration: new BoxDecoration(color: Colors.white),
       child: new Stack(
        children: [
          new Padding(
            padding: const EdgeInsets.only(bottom: 350.0),
            child: new GradientAppBar(" "),
          ),
          new Positioned(
            bottom: 150.0,
            height: 260.0,
            left: 10.0,
            right: 10.0,
            child: new Padding(
              padding: new EdgeInsets.all(10.0),
              child: new Card(
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const ListTile(
                      title: const Text(
                        'LOGIN',
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: 16.50,
                          fontFamily: "Helvetica",
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                          letterSpacing: 1.00,
                        ),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person),
                      title: new TextField(
                        controller: _user1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a username'),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person_pin),
                      title: new TextField(
                        controller: _pass1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a password'),
                        obscureText: true,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          new Positioned(
            bottom: 70.0,
            left: 15.0,
            right: 05.0,
            child: new ButtonTheme.bar(
            // make buttons use the appropriate styles for cards
              child: new ButtonBar(
                children: <Widget>[
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 13.0),
                    child: new Text(
                      'REGISTER HERE',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/facebook');
                    },
                  ),
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 22.0),
                    child: new Text(
                      'FORGOT PASSWORD?',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/Forgot');
                    },
                  ),
                ],
              ),
            ),
          ),
          new Positioned(
            bottom: 73.0,
            height: 180.0,
            left: 20.0,
            right: 52.0,
            child: new Padding(
              padding: new EdgeInsets.all(0.00),
              child: new ButtonTheme(
                minWidth: 10.0,
                height: 20.0,
                padding: new EdgeInsets.only(right: 37.0),
                child: new ButtonBar(children: <Widget>[
                  new CupertinoButton(
                      borderRadius:
                          const BorderRadius.all(const Radius.circular(36.0)),
                      padding: new EdgeInsets.only(left: 70.0),
                      color: const Color(0xFF426DB7),
                      child: new Text(
                        "     LOGIN                            ",
                        style: new TextStyle(
                            color: Colors.white,
                            fontSize: 12.50,
                            fontFamily: "Handwriting",
                            fontWeight: FontWeight.w500,
                            letterSpacing: 0.00),
                      ),
                      onPressed: () {})
                ]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

আমি এখানে जयকোডিং.টেক / টিউটোরিয়ালস / গাইডস / এর একটি সহজ সমাধান লিখেছি কারণ আমি MediaQueryযথেষ্ট মনে করি না । আপনি এটি পরীক্ষা করে দেখতে চাইবেন।
NduJay

উত্তর:


77

MediaQueryক্লাস ব্যবহার :

MediaQueryData queryData;
queryData = MediaQuery.of(context);

মিডিয়াকিউয়ারি : মিডিয়া কোয়েরি প্রদত্ত ডেটার সমাধান করে এমন একটি সাবট্রি স্থাপন করে।

মিডিয়াকিউয়ারিডেটা : এক টুকরো মিডিয়া সম্পর্কিত তথ্য (যেমন উইন্ডো)।

ডিভাইস পিক্সেল অনুপাত পেতে:

queryData.devicePixelRatio

ডিভাইসের স্ক্রিনের প্রস্থ এবং উচ্চতা পেতে:

queryData.size.width
queryData.size.height

পাঠ্য স্কেল ফ্যাক্টরটি পেতে:

queryData.textScaleFactor

AspectRatioক্লাস ব্যবহার :

ডক থেকে:

একটি উইজেট যা শিশুকে একটি নির্দিষ্ট দিক অনুপাতের আকার দিতে চেষ্টা করে।

উইজেটটি প্রথমে বিন্যাস সীমাবদ্ধতার দ্বারা অনুমোদিত বৃহত্তম প্রস্থের চেষ্টা করে। উইজেটের উচ্চতা প্রস্থের প্রদত্ত দিক অনুপাত প্রয়োগ করে নির্ধারিত হয়, প্রস্থ থেকে উচ্চতার অনুপাত হিসাবে প্রকাশ করা হয়।

উদাহরণস্বরূপ, একটি 16: 9 প্রস্থ: উচ্চতার দিক অনুপাতের মান 16.0 / 9.0 হবে। সর্বাধিক প্রস্থ যদি অসীম হয় তবে প্রাথমিক প্রস্থটি সর্বোচ্চ উচ্চতায় আকৃতির অনুপাত প্রয়োগ করে নির্ধারিত হয়।

এখন দ্বিতীয় উদাহরণ বিবেচনা করুন, এবার একটি অনুপাতের পরিমাণের সাথে 2.0 এবং লেআউট সীমাবদ্ধতার সাথে প্রস্থটি 0.0 এবং 100.0 এর মধ্যে এবং উচ্চতা 0.0 এবং 100.0 এর মধ্যে হওয়া দরকার। আমরা 100.0 প্রস্থের (বৃহত্তম অনুমোদিত) এবং উচ্চতা 50.0 (দিক অনুপাতের সাথে মেলে) নির্বাচন করব।

//example
new Center(
 child: new AspectRatio(
  aspectRatio: 100 / 100,
  child: new Container(
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: Colors.orange,
      )
    ),
  ),
),

এছাড়াও আপনি ব্যবহার করতে পারেন :


4
আমি ডিভাইসের প্রস্থ এবং উচ্চতা পেতে সক্ষম হয়েছি, আমি কীভাবে পরীক্ষার আকার, প্যাডিং, মার্জিনটি সেট করতে পারি queryData
ফারহানা

33

এই ক্লাসটি সাহায্য করবে এবং তারপরে init পদ্ধতিতে ক্লাসটি আরম্ভ করবে।

import 'package:flutter/widgets.dart';

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;
  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context){
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth/100;
    blockSizeVertical = screenHeight/100;
    _safeAreaHorizontal = _mediaQueryData.padding.left +
        _mediaQueryData.padding.right;
    _safeAreaVertical = _mediaQueryData.padding.top +
        _mediaQueryData.padding.bottom;
    safeBlockHorizontal = (screenWidth - _safeAreaHorizontal)/100;
    safeBlockVertical = (screenHeight - _safeAreaVertical)/100;
  }
}

তারপরে আপনার উইজেটগুলির মাত্রায় এটি করুন

Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Container(
    height: SizeConfig.safeBlockVertical * 10, //10 for example
    width: SizeConfig.safeBlockHorizontal * 10, //10 for example
    );}

এই পোস্ট লেখকের সমস্ত ক্রেডিট: https://medium.com/flutter-commune/flutter-effectively-scale-ui-acc રેકોર્ડ-to-differences-screen-sizes- 2cb7c115ea0a


এই আকারকনফিগ শ্রেণীর সাথে কীভাবে এজজিস্টস নীচে যুক্ত করবেন?
ফারওয়া

আমি মনে করি হিসাবে ধারক একটি প্যাডিং কাজ করবে। চেষ্টা করুন এবং আমাকে আপনাকে বলার জন্য বলুন !!

16

আমি যা করি তা হ'ল পর্দার প্রস্থ এবং উচ্চতা নেওয়া এবং এটির থেকে 100 * 100 এর একটি গ্রিড গণনা করে জিনিসগুলি অবস্থান এবং স্কেল করতে এবং এটিকে আবার ব্যবহার করা যায় এমন স্ট্যাটিক ভেরিয়েবল হিসাবে সংরক্ষণ করে। বেশিরভাগ ক্ষেত্রে বেশ ভাল কাজ করে। এটার মত:

AppConfig.width = MediaQuery.of(context).size.width;
AppConfig.height = MediaQuery.of(context).size.height;
AppConfig.blockSize = AppConfig.width / 100;
AppConfig.blockSizeVertical = AppConfig.height / 100;

তারপরে আমি এই মানগুলি অনুসারে সবকিছুকে স্কেল করি:

double elementWidth = AppConfig.blockSize * 10.0;   // 10% of the screen width

বা

double fontSize = AppConfig.blockSize * 1.2;

কখনও কখনও নিরাপদ অঞ্চল (খাঁজ, ইত্যাদি) একটি বিন্যাসকে হত্যা করে, তাই আপনি এটিও বিবেচনা করতে পারেন:

AppConfig.safeAreaHorizontal = MediaQuery.of(context).padding.left +
    MediaQuery.of(context).padding.right;

double screenWidthWithoutSafeArea = AppConfig.width - AppConfig.safeAreaHorizontal;

এটি সাম্প্রতিক কয়েকটি প্রকল্পে দুর্দান্ত কাজ করেছে।


4
ফন্ট সাইজ গণনা কিভাবে? প্রস্থ বা উচ্চতার ভিত্তিতে গণনা করা ভাল?
হর্ষ ভাবসার

আমি প্রস্থের ভিত্তিতে সেগুলি গণনা করছি। তবে সত্যি কথা বলতে, আমি এটিকে অ্যাপ্লিকেশনগুলি দিয়ে চেষ্টা করি নি যা ল্যান্ডস্কেপ এবং প্রতিকৃতি মোড উভয় সমর্থন করে। তবে আপনি এখনও উভয় অভিমুখে আলাদা আলাদা গণনা করতে সক্ষম হতে পারেন।
দাতায়াহ

এটি কীভাবে পর্দার ঘনত্বের পার্থক্যের সমস্যাটি ঠিক সমাধান করবে? আপনি স্ক্রিনটিকে ১০০ * ১০০ গ্রিড ব্লকে ভাগ করে বললে আপনি এটিকে শব্দ করে তোলে ফলস্বরূপ ব্লকগুলি সমস্ত সমান আকারের (অর্থাত্ স্কোয়ার), তবে সেগুলি হয় না। আপনার যদি এমন কোনও ডিভাইস থাকে যা অনুভূমিকভাবে (পর্দার প্রস্থ) এর চেয়ে উল্লম্ব (পর্দার উচ্চতা) পিক্সেলের সংখ্যার দ্বিগুণ হয়ে থাকে তবে আপনার ফলস্বরূপ ব্লকগুলি স্কোয়ারের পরিবর্তে আয়তক্ষেত্র হবে - যার অর্থ আপনার কোডটি এখনও একই সমস্যা তৈরি করে যা আপনি সমাধান করার চেষ্টা শুরু করেছিলেন। এটি প্রমাণ করতে একাধিক স্ক্রিন ঘনত্বগুলিতে আপনার কোডটি পরীক্ষা করুন। সুতরাং এটি আমার কাছে আসলে সমাধান নয়।
সিলসুর

@ সিলসুর, নিশ্চিত যে কোনও ডিভাইস এবং ঘনত্বগুলিতে ব্লকগুলি একই আকারের নয় তবে এটি কার্যকর করে তোলে (বেশিরভাগ ক্ষেত্রে)। ব্লকটির প্রস্থ বা উচ্চতা - বা উভয়ই সম্পর্কে যদি এটির অবস্থান এবং আকারের গণনা করা হয় তবে আমি কেবলমাত্র স্ক্রিনে যুক্ত প্রতিটি উইজেটের জন্য আমাকে সিদ্ধান্ত নিতে হবে। আমি এই পদ্ধতিটি অ্যাপ্লিকেশনগুলিতে ব্যবহার করেছি যা কোনও আইফোন, আইপ্যাড বা অ্যান্ড্রয়েড ফোন / ট্যাবলেটটিতে ডিভাইস-নির্দিষ্ট সংশোধন ছাড়াই চলমান। ল্যান্ডস্কেপ এবং প্রতিকৃতি। তবে আপনি ঠিক বলেছেন যে এই পদ্ধতিটি এখনও জটিল ইউআই সমস্যাগুলি পুরোপুরি সমাধান করছে না। আমি এখনও এটি পরিচালনা করার জন্য আরও ভাল কিছু খুঁজছি।
দাতায়াহ

11

MediaQueryক্লাস চেক করুন

উদাহরণস্বরূপ, বর্তমান মিডিয়ার আকার শিখতে (যেমন, উইন্ডো আপনার অ্যাপ ধারণকারী), আপনি পড়তে পারেন MediaQueryData.sizeথেকে সম্পত্তি MediaQueryDataফিরিয়ে দেওয়া MediaQuery.of: MediaQuery.of(context).size

সুতরাং আপনি নিম্নলিখিতটি করতে পারেন:

 new Container(
                      height: MediaQuery.of(context).size.height/2,
..            )

আপনার অবস্থান পরিবর্তে মিডিয়াকিউয়ারি ব্যবহারের অর্থ ??
praveen Dp

আপনি কী করতে চাইছেন তা আমি বুঝতে পারছি না
আজিজা

পোষ্টিশনড ব্যবহার করে, স্ট্যাকের ভিতরে প্যাডিং। আমি এটিকে পর্দার আকারের সাথে সামঞ্জস্য করেছি now এখন এটির প্রতিক্রিয়াশীল করার জন্য আমার পরিবর্তে মিডিয়া প্রশ্ন ব্যবহার করা উচিত ??
প্রবীণ ডিপি

7

বিভিন্ন স্ক্রিন আকারের জন্য প্রতিক্রিয়াশীল ইউআই করার সহজতম উপায় হ'ল সাইজার প্লাগইন। সাইজার স্ক্রিনশট

যে কোনও স্ক্রিন সাইজের ডিভাইসে ট্যাবলেটটিতেও প্রতিক্রিয়াশীল ইউআই তৈরি করুন। এটি এই প্লাগইনটি দেখুন ⬇️
https://pub.dev/packages/sizer

.h  - for widget height
.w  - for widget width
.sp - for font size

ব্যবহারের .h, .w, .spভালো মান পর ⬇️

উদাহরণ:

Container(
  height: 10.0.h,  //10% of screen height
  width: 80.0.w,   //80% of screen width
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

আমি এই প্লাগইনটি দিয়ে অনেক প্রতিক্রিয়াশীল অ্যাপ তৈরি করেছি।


4
পদ্ধতির দুর্দান্ত হয় আমি চেষ্টা করব এবং আচরণটি পর্যবেক্ষণ করব এবং যদি তা আমাকে সন্তুষ্ট করে তবে এটির সাথে উত্পাদনে যাব।
ওয়ামবার্ট ওরিওন

4
আপনাকে অনেক ধন্যবাদ @ মিউজিক প্যাটেল এটি অ্যাপ্সকে প্রতিক্রিয়াশীল করার সহজতম উপায় way
তরুন শর্মা

5

আপনি স্কেল আকারের ইনপুট হিসাবে প্রস্থ বা উচ্চতার এক শতাংশ নিতে পারেন।

fontSize: MediaQuery.of(_ctxt).size.height * 0.065

যেখানে শেষে গুণকটির একটি মান রয়েছে যা সক্রিয় এমুলেটরটির জন্য পাঠ্যকে ভাল দেখাচ্ছে।

নীচে আমি কীভাবে এটি সেট আপ করছি যাতে সমস্ত স্কেলযুক্ত মাত্রা এক জায়গায় কেন্দ্রীভূত হয়। এইভাবে আপনি সহজেই এডজাস্ট করতে পারেন এবং Media.of()পুরো কোড জুড়ে কলগুলি সন্ধান না করেই হট রিলোডের সাথে দ্রুত পুনরায় চালু করতে পারেন ।

  1. সমস্ত ম্যাপিং অ্যাপসস্কেল.ডার্ট সংরক্ষণ করার জন্য ফাইল তৈরি করুন

    class AppScale {
      BuildContext _ctxt;
    
      AppScale(this._ctxt);
    
      double get labelDim => scaledWidth(.04);
      double get popupMenuButton => scaledHeight(.065); 

      double scaledWidth(double widthScale) {
        return MediaQuery.of(_ctxt).size.width * widthScale;
      }
    
      double scaledHeight(double heightScale) {
        return MediaQuery.of(_ctxt).size.height * heightScale;
      }
    }

  1. তারপরে রেফারেন্স করুন যে যেখানে আপনার যেখানে স্কেল করা মান দরকার

    AppScale _scale = AppScale(context);

    // ... 

    Widget label1 = Text(
      "Some Label",
      style: TextStyle(fontSize: _scale.labelDim),
    );

এই পোস্টে উত্তর ধন্যবাদ


4
Place dependency in pubspec.yaml

flutter_responsive_screen: ^1.0.0

Function hp = Screen(MediaQuery.of(context).size).hp;
Function wp = Screen(MediaQuery.of(context).size).wp;

Example :
return Container(height: hp(27),weight: wp(27));

4
পরের বার আপনি "সমাধান" পোস্ট করার পরে হুডের নীচে কী ঘটে যায় তার একটি ব্যাখ্যা দুর্দান্ত হবে? যাইহোক, আমি এই নির্ভরতার জন্য গিটহাবটি পরীক্ষা করে দেখেছি। এটি মূলত একটি একক শ্রেণীর (কোডের 16 টি লাইন সহ) যা ইনপুট প্রস্থ এবং উচ্চতার মান নেয় এবং শতাংশ হিসাবে স্ক্রিনের প্রস্থ এবং উচ্চতার উপর ভিত্তি করে স্কেল করে। এটি মূলত @Datayeah এর সমাধানের সমান only কেবলমাত্র পার্থক্য হ'ল এটি খুব সুন্দরভাবে প্যাকেজড। ডেটায়াহ হিসাবে একই সমস্যাগুলি এখানে প্রয়োগ করুন - বিভিন্ন স্ক্রিন ঘনত্ব ডিভাইসে 1: 1 স্কেলিংয়ের জন্য মোটেই ভাল সমাধান নয়। স্ক্রিন ঘনত্বের সমস্যাটি এই "সমাধান" দিয়ে সলভ হয় না।
সিলসুর

4

অনেক গবেষণা এবং পরীক্ষার পরে, আমি বর্তমানে একটি অ্যান্ড্রয়েড / আইওএস থেকে ফ্লটারে রূপান্তর করছি এমন একটি অ্যাপের জন্য একটি সমাধান তৈরি করেছি।

অ্যান্ড্রয়েড এবং আইওএসের সাহায্যে আমি একটি 'স্কেলিং ফ্যাক্টর' ব্যবহার করেছি বেস ফন্টের আকারের জন্য, স্ক্রিনের আকারের সাথে তুলনামূলকভাবে পাঠ্য আকারকে রেন্ডারিং করি।

এই নিবন্ধটি খুব সহায়ক ছিল: https://medium.com/flutter-commune/flutter-effectively-scale-ui-acc રેકોર્ડ-to-differences-screen-sizes-2cb7c115ea0a

আমি মেটেরিয়াল ডিজাইনের টাইপোগ্রাফিক স্টাইলগুলির ফন্ট আকার পেতে একটি স্টেটলেস উইজেট তৈরি করেছি। মিডিয়াকিউরি ব্যবহার করে ডিভাইসের মাত্রা পাওয়া, একটি স্কেলিং ফ্যাক্টর গণনা করা, তারপরে ম্যাটেরিয়াল ডিজাইনের পাঠ্য আকারগুলি পুনরায় সেট করা। উইজেটটি কাস্টম মেটাল ডিজাইন থিম সংজ্ঞায়িত করতে ব্যবহৃত হতে পারে।

অনুকরণকারী ব্যবহৃত:

  • পিক্সেল সি - 9.94 "ট্যাবলেট
  • পিক্সেল 3 - 5.46 "ফোন
  • আইফোন 11 প্রো সর্বোচ্চ - 5.8 "ফোন

স্ট্যান্ডার্ড ফন্টের আকারের সাথে

আকারযুক্ত ফন্টের আকারের সাথে

set_app_theme.dart (সেটআপ থেম উইজেট)

import 'package:flutter/material.dart';
import 'dart:math';

class SetAppTheme extends StatelessWidget {

  final Widget child;

  SetAppTheme({this.child});

  @override
  Widget build(BuildContext context) {

    final _divisor = 400.0;

    final MediaQueryData _mediaQueryData = MediaQuery.of(context);

    final _screenWidth = _mediaQueryData.size.width;
    final _factorHorizontal = _screenWidth / _divisor;

    final _screenHeight = _mediaQueryData.size.height;
    final _factorVertical = _screenHeight / _divisor;

    final _textScalingFactor = min(_factorVertical, _factorHorizontal);

    final _safeAreaHorizontal = _mediaQueryData.padding.left + _mediaQueryData.padding.right;
    final _safeFactorHorizontal = (_screenWidth - _safeAreaHorizontal) / _divisor;

    final _safeAreaVertical = _mediaQueryData.padding.top + _mediaQueryData.padding.bottom;
    final _safeFactorVertical = (_screenHeight - _safeAreaVertical) / _divisor;

    final _safeAreaTextScalingFactor = min(_safeFactorHorizontal, _safeFactorHorizontal);

    print('Screen Scaling Values:' + '_screenWidth: $_screenWidth');
    print('Screen Scaling Values:' + '_factorHorizontal: $_factorHorizontal ');

    print('Screen Scaling Values:' + '_screenHeight: $_screenHeight');
    print('Screen Scaling Values:' + '_factorVertical: $_factorVertical ');

    print('_textScalingFactor: $_textScalingFactor ');

    print('Screen Scaling Values:' + '_safeAreaHorizontal: $_safeAreaHorizontal ');
    print('Screen Scaling Values:' + '_safeFactorHorizontal: $_safeFactorHorizontal ');

    print('Screen Scaling Values:' + '_safeAreaVertical: $_safeAreaVertical ');
    print('Screen Scaling Values:' + '_safeFactorVertical: $_safeFactorVertical ');

    print('_safeAreaTextScalingFactor: $_safeAreaTextScalingFactor ');

    print('Default Material Design Text Themes');
    print('display4: ${Theme.of(context).textTheme.display4}');
    print('display3: ${Theme.of(context).textTheme.display3}');
    print('display2: ${Theme.of(context).textTheme.display2}');
    print('display1: ${Theme.of(context).textTheme.display1}');
    print('headline: ${Theme.of(context).textTheme.headline}');
    print('title: ${Theme.of(context).textTheme.title}');
    print('subtitle: ${Theme.of(context).textTheme.subtitle}');
    print('body2: ${Theme.of(context).textTheme.body2}');
    print('body1: ${Theme.of(context).textTheme.body1}');
    print('caption: ${Theme.of(context).textTheme.caption}');
    print('button: ${Theme.of(context).textTheme.button}');

    TextScalingFactors _textScalingFactors = TextScalingFactors(
        display4ScaledSize: (Theme.of(context).textTheme.display4.fontSize * _safeAreaTextScalingFactor),
        display3ScaledSize: (Theme.of(context).textTheme.display3.fontSize * _safeAreaTextScalingFactor),
        display2ScaledSize: (Theme.of(context).textTheme.display2.fontSize * _safeAreaTextScalingFactor),
        display1ScaledSize: (Theme.of(context).textTheme.display1.fontSize * _safeAreaTextScalingFactor),
        headlineScaledSize: (Theme.of(context).textTheme.headline.fontSize * _safeAreaTextScalingFactor),
        titleScaledSize: (Theme.of(context).textTheme.title.fontSize * _safeAreaTextScalingFactor),
        subtitleScaledSize: (Theme.of(context).textTheme.subtitle.fontSize * _safeAreaTextScalingFactor),
        body2ScaledSize: (Theme.of(context).textTheme.body2.fontSize * _safeAreaTextScalingFactor),
        body1ScaledSize: (Theme.of(context).textTheme.body1.fontSize * _safeAreaTextScalingFactor),
        captionScaledSize: (Theme.of(context).textTheme.caption.fontSize * _safeAreaTextScalingFactor),
        buttonScaledSize: (Theme.of(context).textTheme.button.fontSize * _safeAreaTextScalingFactor));

    return Theme(
      child: child,
      data: _buildAppTheme(_textScalingFactors),
    );
  }
}

final ThemeData customTheme = ThemeData(
  primarySwatch: appColorSwatch,
  // fontFamily: x,
);

final MaterialColor appColorSwatch = MaterialColor(0xFF3787AD, appSwatchColors);

Map<int, Color> appSwatchColors =
{
  50  : Color(0xFFE3F5F8),
  100 : Color(0xFFB8E4ED),
  200 : Color(0xFF8DD3E3),
  300 : Color(0xFF6BC1D8),
  400 : Color(0xFF56B4D2),
  500 : Color(0xFF48A8CD),
  600 : Color(0xFF419ABF),
  700 : Color(0xFF3787AD),
  800 : Color(0xFF337799),
  900 : Color(0xFF285877),
};

_buildAppTheme (TextScalingFactors textScalingFactors) {

  return customTheme.copyWith(

    accentColor: appColorSwatch[300],
    buttonTheme: customTheme.buttonTheme.copyWith(buttonColor: Colors.grey[500],),
    cardColor: Colors.white,
    errorColor: Colors.red,
    inputDecorationTheme: InputDecorationTheme(border: OutlineInputBorder(),),
    primaryColor: appColorSwatch[700],
    primaryIconTheme: customTheme.iconTheme.copyWith(color: appColorSwatch),
    scaffoldBackgroundColor: Colors.grey[100],
    textSelectionColor: appColorSwatch[300],
    textTheme: _buildAppTextTheme(customTheme.textTheme, textScalingFactors),
    appBarTheme: customTheme.appBarTheme.copyWith(
        textTheme: _buildAppTextTheme(customTheme.textTheme, textScalingFactors)),

//    accentColorBrightness: ,
//    accentIconTheme: ,
//    accentTextTheme: ,
//    appBarTheme: ,
//    applyElevationOverlayColor: ,
//    backgroundColor: ,
//    bannerTheme: ,
//    bottomAppBarColor: ,
//    bottomAppBarTheme: ,
//    bottomSheetTheme: ,
//    brightness: ,
//    buttonBarTheme: ,
//    buttonColor: ,
//    canvasColor: ,
//    cardTheme: ,
//    chipTheme: ,
//    colorScheme: ,
//    cupertinoOverrideTheme: ,
//    cursorColor: ,
//    dialogBackgroundColor: ,
//    dialogTheme: ,
//    disabledColor: ,
//    dividerColor: ,
//    dividerTheme: ,
//    floatingActionButtonTheme: ,
//    focusColor: ,
//    highlightColor: ,
//    hintColor: ,
//    hoverColor: ,
//    iconTheme: ,
//    indicatorColor: ,
//    materialTapTargetSize: ,
//    pageTransitionsTheme: ,
//    platform: ,
//    popupMenuTheme: ,
//    primaryColorBrightness: ,
//    primaryColorDark: ,
//    primaryColorLight: ,
//    primaryTextTheme: ,
//    secondaryHeaderColor: ,
//    selectedRowColor: ,
//    sliderTheme: ,
//    snackBarTheme: ,
//    splashColor: ,
//    splashFactory: ,
//    tabBarTheme: ,
//    textSelectionHandleColor: ,
//    toggleableActiveColor: ,
//    toggleButtonsTheme: ,
//    tooltipTheme: ,
//    typography: ,
//    unselectedWidgetColor: ,
  );
}

class TextScalingFactors {

  final double display4ScaledSize;
  final double display3ScaledSize;
  final double display2ScaledSize;
  final double display1ScaledSize;
  final double headlineScaledSize;
  final double titleScaledSize;
  final double subtitleScaledSize;
  final double body2ScaledSize;
  final double body1ScaledSize;
  final double captionScaledSize;
  final double buttonScaledSize;

  TextScalingFactors({

    @required this.display4ScaledSize,
    @required this.display3ScaledSize,
    @required this.display2ScaledSize,
    @required this.display1ScaledSize,
    @required this.headlineScaledSize,
    @required this.titleScaledSize,
    @required this.subtitleScaledSize,
    @required this.body2ScaledSize,
    @required this.body1ScaledSize,
    @required this.captionScaledSize,
    @required this.buttonScaledSize
  });
}

TextTheme _buildAppTextTheme(

    TextTheme _customTextTheme,
    TextScalingFactors _scaledText) {

  return _customTextTheme.copyWith(

    display4: _customTextTheme.display4.copyWith(fontSize: _scaledText.display4ScaledSize),
    display3: _customTextTheme.display3.copyWith(fontSize: _scaledText.display3ScaledSize),
    display2: _customTextTheme.display2.copyWith(fontSize: _scaledText.display2ScaledSize),
    display1: _customTextTheme.display1.copyWith(fontSize: _scaledText.display1ScaledSize),
    headline: _customTextTheme.headline.copyWith(fontSize: _scaledText.headlineScaledSize),
    title: _customTextTheme.title.copyWith(fontSize: _scaledText.titleScaledSize),
    subtitle: _customTextTheme.subtitle.copyWith(fontSize: _scaledText.subtitleScaledSize),
    body2: _customTextTheme.body2.copyWith(fontSize: _scaledText.body2ScaledSize),
    body1: _customTextTheme.body1.copyWith(fontSize: _scaledText.body1ScaledSize),
    caption: _customTextTheme.caption.copyWith(fontSize: _scaledText.captionScaledSize),
    button: _customTextTheme.button.copyWith(fontSize: _scaledText.buttonScaledSize),

  ).apply(bodyColor: Colors.black);
}

main.dart (ডেমো অ্যাপ)

import 'package:flutter/material.dart';
import 'package:scaling/set_app_theme.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: SetAppTheme(child: HomePage()),
    );
  }
}


class HomePage extends StatelessWidget {

  final demoText = '0123456789';

  @override
  Widget build(BuildContext context) {

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Text Scaling with SetAppTheme',
            style: TextStyle(color: Colors.white),),
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.display4.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.display3.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.display2.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.display1.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.headline.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.title.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.subtitle.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.body2.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.body1.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.caption.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.button.fontSize,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3

আমি এখানে অন্য ব্যক্তির (@ দাতায়াহ এবং ভিথানী রবি) সমাধানগুলি কিছুটা কড়া নাড়ছি, তাই আমি ভেবেছিলাম এই পরিবর্তনশীল পর্দার ঘনত্ব স্কেলিং সমস্যা সমাধান করার জন্য আমি নিজের চেষ্টা [গুলি] ভাগ করে নেব বা বন্ধ করে দেব। সুতরাং আমি এই সমস্যাটিকে একটি দৃ /় / স্থির ভিত্তি থেকে পৌঁছেছি: আমি আমার সমস্ত স্কেলিংকে 2: 1 (উচ্চতা: প্রস্থ) এর একটি স্থির (অপরিবর্তনীয়) অনুপাতের ভিত্তিতে স্থাপন করি। আমার কাছে "ম্যাকজিভার" একটি সহায়ক ক্লাস রয়েছে যা আমার অ্যাপ্লিকেশন জুড়ে সমস্ত ভারী উত্তোলন (এবং দরকারী কোড ফাইনিং) করে। এই "ম্যাকগাইভার" শ্রেণিতে কেবল স্থির পদ্ধতি এবং স্থির ধ্রুবক শ্রেণীর সদস্য রয়েছে contains

অনুপাত স্কেলিং পদ্ধতি: আমি প্রস্থ এবং উচ্চতা উভয়ই 2: 1 অ্যাসপেক্ট অনুপাতের ভিত্তিতে স্বাধীনভাবে স্কেল করি। আমি প্রস্থ এবং উচ্চতা ইনপুট মানগুলি গ্রহণ করি এবং প্রতিটিকে প্রস্থ এবং উচ্চতার ধ্রুবক দ্বারা বিভক্ত করি এবং অবশেষে একটি প্রযোজ্য ফ্যাক্টর গণনা করি যার দ্বারা সংশ্লিষ্ট প্রস্থ এবং উচ্চতা ইনপুট মানগুলি স্কেল করতে হয়। আসল কোডটি নিম্নরূপ দেখায়:

import 'dart:math';
import 'package:flutter/material.dart';

class McGyver {

  static const double _fixedWidth = 410;    // Set to an Aspect Ratio of 2:1 (height:width)
  static const double _fixedHeight = 820;   // Set to an Aspect Ratio of 2:1 (height:width) 

  // Useful rounding method (@andyw solution -> /programming/28419255/how-do-you-round-a-double-in-dart-to-a-given-degree-of-precision-after-the-decim/53500405#53500405)
  static double roundToDecimals(double val, int decimalPlaces){
    double mod = pow(10.0, decimalPlaces);
    return ((val * mod).round().toDouble() / mod);
  }

  // The 'Ratio-Scaled' Widget method (takes any generic widget and returns a "Ratio-Scaled Widget" - "rsWidget")
  static Widget rsWidget(BuildContext ctx, Widget inWidget, double percWidth, double percHeight) {

    // ---------------------------------------------------------------------------------------------- //
    // INFO: Ratio-Scaled "SizedBox" Widget - Scaling based on device's height & width at 2:1 ratio.  //
    // ---------------------------------------------------------------------------------------------- //

    final int _decPlaces = 5;
    final double _fixedWidth = McGyver._fixedWidth;
    final double _fixedHeight = McGyver._fixedHeight;

    Size _scrnSize = MediaQuery.of(ctx).size;                // Extracts Device Screen Parameters.
    double _scrnWidth = _scrnSize.width.floorToDouble();     // Extracts Device Screen maximum width.
    double _scrnHeight = _scrnSize.height.floorToDouble();   // Extracts Device Screen maximum height.

    double _rsWidth = 0;
    if (_scrnWidth == _fixedWidth) {   // If input width matches fixedWidth then do normal scaling.
      _rsWidth = McGyver.roundToDecimals((_scrnWidth * (percWidth / 100)), _decPlaces);
    } else {   // If input width !match fixedWidth then do adjustment factor scaling.
      double _scaleRatioWidth = McGyver.roundToDecimals((_scrnWidth / _fixedWidth), _decPlaces);
      double _scalerWidth = ((percWidth + log(percWidth + 1)) * pow(1, _scaleRatioWidth)) / 100;
      _rsWidth = McGyver.roundToDecimals((_scrnWidth * _scalerWidth), _decPlaces);
    }

    double _rsHeight = 0;
    if (_scrnHeight == _fixedHeight) {   // If input height matches fixedHeight then do normal scaling.
      _rsHeight = McGyver.roundToDecimals((_scrnHeight * (percHeight / 100)), _decPlaces);
    } else {   // If input height !match fixedHeight then do adjustment factor scaling.
      double _scaleRatioHeight = McGyver.roundToDecimals((_scrnHeight / _fixedHeight), _decPlaces);
      double _scalerHeight = ((percHeight + log(percHeight + 1)) * pow(1, _scaleRatioHeight)) / 100;
      _rsHeight = McGyver.roundToDecimals((_scrnHeight * _scalerHeight), _decPlaces);
    }

    // Finally, hand over Ratio-Scaled "SizedBox" widget to method call.
    return SizedBox(
      width: _rsWidth,
      height: _rsHeight,
      child: inWidget,
    );
  }

}

... ... ...

তারপরে আপনি পৃথকভাবে আপনার উইজেটগুলি স্কেল করবেন (যা আমার পারফেকশনিস্ট রোগের জন্য আমার ইউআই এর সমস্ত) যা নীচে "আরএস উইজেট ()" পদ্ধতিতে সাধারণ স্ট্যাটিক কল সহ:

  // Step 1: Define your widget however you like (this widget will be supplied as the "inWidget" arg to the "rsWidget" method in Step 2)...
  Widget _btnLogin = RaisedButton(color: Colors.blue, elevation: 9.0, 
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(McGyver.rsDouble(context, ScaleType.width, 2.5))),
                                  child: McGyver.rsText(context, "LOGIN", percFontSize: EzdFonts.button2_5, textColor: Colors.white, fWeight: FontWeight.bold),
                                  onPressed: () { _onTapBtnLogin(_tecUsrId.text, _tecUsrPass.text); }, );

  // Step 2: Scale your widget by calling the static "rsWidget" method...
  McGyver.rsWidget(context, _btnLogin, 34.5, 10.0)   // ...and Bob's your uncle!!

দুর্দান্ত জিনিসটি হ'ল "আরএস উইজেট ()" পদ্ধতিটি একটি উইজেট দেয়! সুতরাং আপনি অন্য কোনও পরিবর্তনশীলকে স্কেলযুক্ত উইজেট নির্ধারণ করতে পারেন যেমন _rsBtnLoginপুরো জায়গা জুড়ে ব্যবহার করার জন্য - বা আপনি কেবল McGyver.rsWidget()আপনার build()পদ্ধতির অভ্যন্তরে পুরো পদ্ধতি কলটি ব্যবহার করতে পারেন (উইজেট ট্রিতে ঠিক কীভাবে আপনার এটি প্রয়োজন) এবং এটি এটি করা উচিত নিখুঁতভাবে কাজ করবে।

আরও বেশি চমকপ্রদ কোডারদের জন্য: আপনি খেয়াল করতে পারবেন যে আমি আমার মধ্যে দুটি অতিরিক্ত অনুপাত-স্কেলড পদ্ধতি ব্যবহার করেছি McGyver.rsText()এবং McGyver.rsDouble()(উপরের কোডে সংজ্ঞায়িত নেই) RaisedButton()- সুতরাং আমি মূলত এই স্কেলিংয়ের জিনিস নিয়ে পাগল হয়ে যাই ... কারণ আমি আমার অ্যাপ্লিকেশনগুলিকে দাবি করি যে কোনও স্কেল বা স্ক্রিন ঘনত্বে একেবারে পিক্সেল নিখুঁত !! আমি আমার ইনটস, ডাবলস, প্যাডিং, পাঠ্য (সমস্ত ডিভাইস জুড়ে ইউআই ধারাবাহিকতা প্রয়োজন এমন সমস্ত কিছু) স্কেল করে। আমি আমার পাঠ্যগুলি কেবল প্রস্থের ভিত্তিতে স্কেল করি তবে অন্যান্য অক্ষরগুলির জন্য কোন অক্ষটি ব্যবহার করতে হবে তা নির্দিষ্ট করে ( উপরের কোড উদাহরণে কল ScaleType.widthকরার জন্য ব্যবহৃত এনাম দিয়ে সম্পন্ন হয়েছিল McGyver.rsDouble())।

আমি জানি এটি ক্রেজি - এবং মূল থ্রেডে অনেক কাজ করা - তবে আমি আশা করছি যে কেউ আমার চেষ্টা এখানে দেখতে পাবে এবং আমার পর্দার ঘনত্ব 1: 1 স্কেলিংয়ের আরও ভাল (আরও হালকা ওজন) সমাধান পেতে আমাকে সহায়তা করবে দুঃস্বপ্ন


4
@ আব্বাস.এম - হ্যাঁ, আমি অনুপাত-স্কেলিং কোড লাইনে একটি সামান্য পরিবর্তন করেছি [আপডেট কোড দেখুন] এবং আমি বিশ্বাস করি এটিই নিকটতম আমি বাস্তব 1: 1 অনুপাতের স্কেলিং সমাধানে আসতে পারি - আমি বেশ কয়েকটি সংখ্যা চেষ্টা করেছি এই এক পেতে বিকল্প। এই আপডেট হওয়া কোডটির সাথে এখনও কয়েকটি অদ্ভুত [প্রান্ত-কেস] স্কেলিংয়ের সমস্যা রয়েছে তবে একাধিক ঘনত্বের পর্দার উপর UI মিলটি সত্যই দৃinc়প্রত্যয়ী - আপডেট কোডের সাথে পর্দার মধ্যে খুব সূক্ষ্ম পার্থক্য পর্যবেক্ষণযোগ্য। আপনি কী মনে করেন দয়া করে আমাকে জানান - প্রতিক্রিয়াটি অত্যন্ত প্রশংসিত।
শিলসুর

মূল থ্রেড সম্পর্কে সুস্পষ্ট বিষয়, অ্যাপ আরম্ভের পরে পর্দার আকার পরিবর্তন হবে না কারণ অ্যাপটি আরম্ভের পরে স্ক্রিনের আকার পরিবর্তন হবে না, ফলে অ্যাপ্লিকেশন আরআইএন প্রধান ব্লকে কলগুলি সরিয়ে ফেলুন সুতরাং প্রতিটি উইজেট রেন্ডারের চেয়ে আপনার অ্যাপ্লিকেশনটিতে একবারই মূল থ্রেড হিট
ফ্রেড গ্রট

@ সিলসুর, আপনার সমাধানটি খুব দুর্দান্ত দেখাচ্ছে। আপনি কি পুরো ম্যাকগাইভার ক্লাস ভাগ করে নিতে আপত্তি করেন?
ডেভিড

@ ডেভিড - ম্যাকগাইভার ক্লাসটি খুব ভারী বর্গ (এবং প্রকল্পের জন্য নির্দিষ্ট)। আমি এই উদাহরণটিতে যেটি ব্যবহার করেছি তার অনেকগুলি ফাংশন রয়েছে যা ইউআই স্কেলিং সমস্যার সাথে প্রাসঙ্গিক নয়। সুতরাং পুরো ক্লাসটি আপলোড করা আমার পক্ষে ওভারকিল / অদক্ষ। আমি যাইহোক, ক্লাসে কিছুটা উন্নতি করেছি এবং কোডের একটি অন্য সংস্করণ অন্য এসও প্রশ্নের পোস্ট করেছি । সম্ভবত আপনি প্রদত্ত ইউআরএলে উন্নত কোডের লাইন ধরে আপনার স্কেলিং কোডটি আপডেট করতে পারেন।
সিলসুর

1

আপনি পিতামাতার মাত্রা বা ভগ্নাংশরূপী আকারযুক্ত বাক্সের ধারক হিসাবে মিডিয়াকিউয়ারি ব্যবহার করতে পারেন।


1

সমস্যার প্রতি আমার দৃষ্টিভঙ্গি দাতায়েহ যেভাবে করেছে এটির মতো। আমার প্রচুর হার্ডকোডযুক্ত প্রস্থ এবং উচ্চতার মান রয়েছে এবং অ্যাপটি একটি নির্দিষ্ট ডিভাইসে দুর্দান্ত দেখায়। সুতরাং আমি ডিভাইসের স্ক্রিন উচ্চতা পেয়েছি এবং হার্ডকডযুক্ত মানগুলিকে স্কেল করার জন্য একটি উপাদান তৈরি করেছি।

double heightFactor = MediaQuery.of(context).size.height/708

যেখানে 708 নির্দিষ্ট ডিভাইসের উচ্চতা।


1

আমি যতটা সম্ভব সহজ করার চেষ্টা করি। একবার চেষ্টা করে দেখুন আমি যদি একটি মাঝারি স্ক্রিন, বড় স্ক্রিন, ল্যান্ডস্কেপ মোডের জন্য মান নির্ধারণ না করে তবে স্ক্রিনের আকার অনুযায়ী মান প্রদানের জন্য দায়বদ্ধ ফাংশনযুক্ত প্রতিক্রিয়াশীল ইউটিলিটিটিকে দায়বদ্ধ করে ডিফল্টরূপে এটি শর্ট স্ক্রিন নির্ধারিত মান সরবরাহ করে। যে কোন প্রশ্নের জন্য একটি উষ্ণ স্বাগত। আমি উন্নতি করতে চাই

class SampleView extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Center(
  child: Container(
    width: 200,
    height: 200,
    color: Responsive().getResponsiveValue(
        forLargeScreen: Colors.red,
        forMediumScreen: Colors.green,
        forShortScreen: Colors.yellow,
        forMobLandScapeMode: Colors.blue,
        context: context),
  ),
);

}}

 // utility class
          class Responsive {
            // function reponsible for providing value according to screensize
            getResponsiveValue(
                {dynamic forShortScreen,
                dynamic forMediumScreen,
                dynamic forLargeScreen,
                dynamic forMobLandScapeMode,
                BuildContext context}) {

              if (isLargeScreen(context)) {

                return forLargeScreen ?? forShortScreen;
              } else if (isMediumScreen(context)) {

                return forMediumScreen ?? forShortScreen;
              } 
           else if (isSmallScreen(context) && isLandScapeMode(context)) {

                return forMobLandScapeMode ?? forShortScreen;
              } else {
                return forShortScreen;
              }
            }
          
            isLandScapeMode(BuildContext context) {
              if (MediaQuery.of(context).orientation == Orientation.landscape) {
                return true;
              } else {
                return false;
              }
            }
          
            static bool isLargeScreen(BuildContext context) {
              return getWidth(context) > 1200;
            }
          
            static bool isSmallScreen(BuildContext context) {
              return getWidth(context) < 800;
            }
          
            static bool isMediumScreen(BuildContext context) {
              return getWidth(context) > 800 && getWidth(context) < 1200;
            }
          
            static double getWidth(BuildContext context) {
              return MediaQuery.of(context).size.width;
            }
          }

0

এই পাতাটি ঝাপটানো উইকি থেকে দেখুন:

প্রতিক্রিয়াশীল অ্যাপ্লিকেশন তৈরি করা হচ্ছে

লেআউটবিল্ডার ক্লাসটি ব্যবহার করুন: এর বিল্ডার সম্পত্তি থেকে আপনি একটি বক্সকন্ট্রেন্টস পান। কোনটি প্রদর্শিত হবে তা স্থির করতে সীমাবদ্ধতার বৈশিষ্ট্যগুলি পরীক্ষা করুন। উদাহরণস্বরূপ, যদি আপনার সর্বোচ্চ প্রস্থটি আপনার প্রস্থের ব্রেক ব্রেকপয়েন্টের চেয়ে বেশি হয় তবে বামদিকে একটি সারি সহ একটি স্ক্যাফোল্ড বস্তুটি ফিরিয়ে দিন। যদি এটি সংকীর্ণ হয়, তবে সেই তালিকা সহ একটি ড্রয়ারের সাহায্যে একটি স্ক্যাফোল্ড বস্তুটি ফিরিয়ে দিন। আপনি ডিভাইসের উচ্চতা, দিক অনুপাত বা অন্য কোনও সংখ্যার উপর ভিত্তি করে আপনার প্রদর্শনও সামঞ্জস্য করতে পারেন। যখন সীমাবদ্ধতাগুলি পরিবর্তন হয় (যেমন ব্যবহারকারী ফোনটি ঘোরান, বা আপনার অ্যাপটিকে নওগাতে একটি টাইল ইউআইতে রাখে), বিল্ড ফাংশনটি আবার চালু হবে।


0

লাইব ফোল্ডারে ফোল্ডারের নাম (প্রতিক্রিয়াশীল_স্ক্রিন) এ ফাইলের নাম (app_config.dart) তৈরি করুন:

import 'package:flutter/material.dart';

class AppConfig {
  BuildContext _context;
  double _height;
  double _width;
  double _heightPadding;
  double _widthPadding;

  AppConfig(this._context) {
    MediaQueryData _queryData = MediaQuery.of(_context);
    _height = _queryData.size.height / 100.0;
    _width = _queryData.size.width / 100.0;
    _heightPadding =
    _height - ((_queryData.padding.top + _queryData.padding.bottom) / 100.0);
    _widthPadding =
      _width - (_queryData.padding.left + _queryData.padding.right) / 100.0;
  }

  double rH(double v) {
   return _height * v;
  }

  double rW(double v) {
    return _width * v;
  }

  double rHP(double v) {
    return _heightPadding * v;
  }

 double rWP(double v) {
   return _widthPadding * v;
 }
}

তারপরে:

import 'responsive_screen/app_config.dart';
 ...
class RandomWordsState extends State<RandomWords> {
  AppConfig _ac;
  ...
  @override
  Widget build(BuildContext context) {
    _ac = AppConfig(context);
    ...
    return Scaffold(
      body: Container(
        height: _ac.rHP(50),
        width: _ac.rWP(50),
        color: Colors.red,
        child: Text('Test'),
      ),
    );
    ...
  }

0

MediaQuery.of (প্রসঙ্গ) ব্যবহার করে এই সমস্যাটি সমাধান করা যেতে পারে

স্ক্রিনের প্রস্থ পেতে: MediaQuery.of(context).size.width

স্ক্রিনের উচ্চতা পেতে: MediaQuery.of(context).size.height

মিডিয়াকিউয়ারি উইজেট ঘড়ি সম্পর্কে আরও তথ্যের জন্য, https://www.youtube.com/watch?v=A3WrA4zAaPw


0
  padding: EdgeInsets.only(
      left: 4.0,
      right: ResponsiveWidget.isSmallScreen(context) ? 4: 74, //Check for screen type
      top: 10,
      bottom: 40),

গুগলের সুপারিশ অনুসারে এটি ঠিক আছে তবে সঠিক হতে পারে না।


0

রিসপন্সিবিল্ডার বা স্ক্রিনটাইপ লেআউট ব্যবহৃত হয়

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:responsive_builder/responsive_builder.dart';

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.black,
      ),
      body: ResponsiveBuilder(
        builder: (context, info) {
          var screenType = info.deviceScreenType;
          String _text;
          switch (screenType){
            case DeviceScreenType.desktop: {
              _text = 'Desktop';
              break;
            }
            case DeviceScreenType.tablet: {
              _text = 'Tablet';
              break;
            }
            case DeviceScreenType.mobile: {
              _text = 'Mobile';
              break;
            }
            case DeviceScreenType.watch: {
              _text = 'Watch';
              break;
            }
            default:
              return null;
          }
          return Center(child: Text(_text, style: TextStyle(fontSize: 32, color: Colors.black),));
        },
      ),
    );
  }
}

// screen type layout
ScreenTypeLayout.builder(
  mobile: MobilePage(),
  tablet: TabletPage(),
  desktop: DesktopPage(),
  watch: Watchpage(),
);

0

আপনি আপনার অ্যাপ্লিকেশনটিকে প্রতিক্রিয়াশীল করতে প্রতিক্রিয়াশীল_হেল্পার প্যাকেজটি ব্যবহার করতে পারেন ।

আপনার অ্যাপটিকে প্রতিক্রিয়াশীল করার জন্য এটি একটি খুব সহজ পদ্ধতি। শুধু কটাক্ষপাত করা উদাহরণস্বরূপ পৃষ্ঠা এবং তারপর আপনি এটা চিন্তা করব কিভাবে এটি ব্যবহার করতে।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.