স্ক্রিনের প্রস্থ / উচ্চতার শতাংশে উপাদানগুলির আকার নির্ধারণ করা

Question

পর্দার আকারের (প্রস্থ / উচ্চতা) তুলনায় কোনও উপাদানকে আকার দেওয়ার কোনও সহজ (নন-লেআউটবিল্ডার) উপায় আছে কি? উদাহরণস্বরূপ: আমি কীভাবে কার্ডভিউয়ের প্রস্থকে পর্দার প্রস্থের 65% হতে সেট করব।

এটি buildপদ্ধতির অভ্যন্তরে করা যায় না (স্পষ্টতই) তাই পোস্ট বিল্ড হওয়া পর্যন্ত এটি পিছিয়ে রাখতে হবে। এই জাতীয় যুক্তি রাখার জন্য কি কোনও পছন্দসই জায়গা আছে?

Comments

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

— লিওড্রিছ

আরও 1.5 বছর পরে, দেখে মনে হচ্ছে এটি সর্বোপরি খারাপ ধারণা নয়। প্রতি মাসে সেখানে নতুন ফোন আসার পরে এবং ওয়েদার দিকের অনুপাত নিয়ে আসে।

— ফরিদ

Answer 1

FractionallySizedBoxএছাড়াও দরকারী হতে পারে। আপনি সরাসরি স্ক্রিনের প্রস্থও পড়তে পারেন এবং এর MediaQuery.of(context).sizeভিত্তিতে একটি আকারের বাক্স তৈরি করতে পারেন

MediaQuery.of(context).size.width * 0.65

লেআউটটি কী তা নির্বিশেষে আপনি যদি পর্দার একটি ভগ্নাংশ হিসাবে সত্যই আকার নিতে চান।

Answer 2

এটি একটি পরিপূরক উত্তর যা উল্লিখিত কয়েকটি সমাধানের বাস্তবায়ন দেখায়।

FractionallySizedBox

আপনার যদি একটি একক উইজেট থাকে তবে আপনি FractionallySizedBoxপূরণ করার জন্য উপলব্ধ জায়গার শতাংশ নির্দিষ্ট করতে একটি উইজেট ব্যবহার করতে পারেন। এখানে সবুজটি Containerউপলব্ধ প্রস্থের 70% এবং উপলব্ধ উচ্চতার 30% পূরণ করতে প্রস্তুত।

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

সম্প্রসারিত

Expandedউইজেট একটি উইজেট উপলব্ধ স্থান পূরণ করার জন্য, অনুভূমিকভাবে যদি এটি একটি সারিতে, অথবা উল্লম্বভাবে যদি এটি একটি কলামে অনুমতি দেয়। আপনি flexওজন দিতে একাধিক উইজেট সহ সম্পত্তি ব্যবহার করতে পারেন । এখানে সবুজ Containerপ্রস্থের %০% এবং হলুদ প্রস্থের Container৩০% নেয়।

আপনি এটা উল্লম্বভাবে কাজ করতে চান, তাহলে শুধু প্রতিস্থাপন Rowসঙ্গে Column।

Widget myWidget() {
  return Row(
    children: <Widget>[
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    ],
  );
}

পরিপূরক কোড

main.dartআপনার রেফারেন্সের জন্য কোড এখানে ।

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox"),
        ),
        body: myWidget(),
      ),
    );
  }
}

// replace with example code above
Widget myWidget() {
  return ...
}

Comments

আপনি স্ট্যাকওভারফ্লো উত্তরটি এভাবেই লেখেন! ধন্যবাদ! আমার Dialogস্টাইলিংয়ে আমাকে সাহায্য করেছে :)

— আলেকসান্দার

Answer 3

এটি আরও কিছুটা পরিষ্কার হতে পারে:

double width = MediaQuery.of(context).size.width;

double yourWidth = width * 0.65;

আশা করি এটি আপনার সমস্যার সমাধান করেছে।

Answer 4

আপনি নমনীয় বা প্রসারিত বাচ্চাদের সাথে কলাম / সারি তৈরি করতে পারেন যার নমনীয় মান রয়েছে যা আপনি চান শতাংশের চেয়ে বেশি যোগ করে।

আপনি AspectRatio উইজেট দরকারীও পেতে পারেন ।

Answer 5

MediaQuery.of(context).size.width

Answer 6

এটি করার অনেক উপায় আছে

মিডিয়াকিউরি ব্যবহার করা: এটি অ্যাপবার, সরঞ্জামদণ্ড সহ আপনার ডিভাইসের পূর্ণ স্ক্রিন

 Container(
        width: MediaQuery.of(context).size.width * 0.50,
        height: MediaQuery.of(context).size.height*0.50, 
        color: Colors.blueAccent[400],
 )

২. প্রসারিত ব্যবহার করে: আপনি অনুপাতের প্রস্থ / উচ্চতা নির্ধারণ করতে পারেন

 Container(
        height: MediaQuery.of(context).size.height * 0.50,
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 70,
              child: Container(
                color: Colors.lightBlue[400],
              ),
            ),
            Expanded(
              flex: 30,
              child: Container(
                color: Colors.deepPurple[800],
              ),
            )
          ],
        ),
    )

৩. অন্যান্য ফ্লেক্সিবল এবং অ্যাস্পেক্টরেটিও এবং ফ্র্যাকশনালি সাইজডবক্স পছন্দ করেন

Answer 7

আপনি আপনার উইজেটের বর্তমান প্রসঙ্গে মিডিয়াকিউরি ব্যবহার করতে পারেন এবং এর double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height পরে প্রস্থ বা উচ্চতা পেতে পারেন, আপনি যে শতাংশ চান তার সাথে এটি গুণ করতে পারবেন

Answer 8

প্রথমে পর্দার আকার নিন।

Size size = MediaQuery.of(context).size;

এর পরে আপনি পর্দার প্রস্থের 50% প্রস্থ পেতে widthএটি পেতে এবং এটি দিয়ে গুণ করতে পারেন 0.5।

double width50 = size.width * 0.5;

---

heightআমরা যখন ব্যবহার করি তবে ডিফল্টরূপে সমস্যাটি সাধারণত আসে

double screenHeight = size.height;

আমরা যে উচ্চতাটি পাই তা হ'ল বৈশ্বিক উচ্চতা যা StatusBar+ notch+ AppBarউচ্চতা অন্তর্ভুক্ত করে । সুতরাং, ডিভাইসের বাম উচ্চতা পেতে আমাদের মোট উচ্চতা থেকে paddingউচ্চতা ( StatusBar+ notch) এবং AppBarউচ্চতা বিয়োগ করতে হবে । এখানে আমরা এটি কীভাবে করব।

double abovePadding = MediaQuery.of(context).padding.top;
double appBarHeight = appBar.preferredSize.height;
double leftHeight = screenHeight - abovePadding - appBarHeight;

আমাদের পর্দার উচ্চতা 50% পেতে আমরা এখন নিম্নলিখিতটি ব্যবহার করতে পারি।

double height50 = leftHeight * 0.5

Answer 9

আপনি যদি গ্রিডভিউ ব্যবহার করছেন তবে আপনি আয়ান হিকসনের সমাধানের মতো কিছু ব্যবহার করতে পারেন।

crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4

Answer 10

লেআউটবিল্ডার উইজেটটি ব্যবহার করুন যা আপনাকে অ্যাপবার এবং প্যাডিং বাদ দেয় না এমন উচ্চতা অর্জন করতে সীমাবদ্ধতা প্রদান করবে। তারপরে একটি সাইজডবক্স ব্যবহার করুন এবং লেআউটবিল্ডার থেকে সীমাবদ্ধতাগুলি ব্যবহার করে প্রস্থ এবং উচ্চতা সরবরাহ করুন

return LayoutBuilder(builder: (context2, constraints) {
  return Column(
    children: <Widget>[
      SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        ...