পাখির লেআউট সাধারণত একটি গাছ ব্যবহার করে নির্মিত হয় Column, Rowএবং Stackউইজেট। এই উইজেট কন্সট্রাকটর যুক্তি হল যে কিভাবে শিশুরা তাদের পিতা বা মাতা আপেক্ষিক পরিপূর্ণ জন্য নিয়ম উল্লেখ নিতে, এবং আপনি তাদের মধ্যে মোড়কে পৃথক শিশুদের বিন্যাস প্রভাবিত করতে পারে Expanded, Flexible, Positioned, Align, অথবা Centerউইজেট।
এটি ব্যবহার করে জটিল বিন্যাসগুলি তৈরি করাও সম্ভব CustomMultiChildLayout। এভাবেই Scaffoldঅভ্যন্তরীণভাবে প্রয়োগ করা হয় এবং এটি কোনও অ্যাপে কীভাবে ব্যবহার করা যায় তার একটি উদাহরণ শ্রাইন ডেমোতে উপস্থিত হয় । এছাড়াও আপনি ব্যবহার করতে পারেন LayoutBuilderবা CustomPaint, বা ডাউন একটি স্তর যান এবং প্রসারিত RenderObjectহিসাবে দেখানো খাতের উদাহরণ । আপনার লেআউটটিকে ম্যানুয়ালি এইভাবে করা আরও বেশি কাজ এবং কোণার ক্ষেত্রে ত্রুটির জন্য আরও সম্ভাবনা তৈরি করে, তাই যদি আপনি পারেন তবে আমি উচ্চ-স্তরের লেআউট আদিমকে সাথে নিয়ে যাওয়ার চেষ্টা করব।
আপনার নির্দিষ্ট প্রশ্নের উত্তর দিতে:
- আপনার অ্যাপ্লিকেশন বারের উপাদানগুলিকে স্থাপন করতে যুক্তি
leadingএবং trailingযুক্তি ব্যবহার করুন AppBar। আপনি যদি একটি ব্যবহার করতে চান তাহলে Rowএর পরিবর্তে, ব্যবহার mainAxisAlignmentএর MainAxisAlignment.spaceBetween।
- একটি ব্যবহার করুন
Rowএকটি সঙ্গে crossAxisAlignmentএর CrossAxisAlignment.centerআগুন আইকন এবং সংখ্যা নীচে জায়গায় স্থাপনের জন্য।
- আপনার শীর্ষ এবং নীচের শিরোনামের অবস্থানের জন্য একটি
Columnসহ একটি ব্যবহার করুন । ( তালিকার টাইলগুলি ছড়িয়ে দেওয়ার জন্য আপনার ব্যবহার বিবেচনা করা উচিত , তবে আপনি যদি এটি করেন তবে সঠিক অবস্থানের উপর নিয়ন্ত্রণ হারাবেন))mainAxisAlignmentMainAxisAlignment.spaceBetweenListTile
এখানে একটি কোড স্নিপেট যা আপনার সরবরাহিত নকশাকে কার্যকর করে। এই উদাহরণে আমি IntrinsicHeightগানের টাইলগুলির উচ্চতা নির্ধারণ করতে একটি ব্যবহার করেছি , তবে আপনি নির্দিষ্ট উচ্চতায় কঠোরভাবে কোডিং করে পারফরম্যান্সটি উন্নত করতে পারেন।
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
brightness: Brightness.dark,
primaryColorBrightness: Brightness.dark,
),
home: new HomeScreen(),
debugShowCheckedModeBanner: false,
);
}
}
class Song extends StatelessWidget {
const Song({ this.title, this.author, this.likes });
final String title;
final String author;
final int likes;
@override
Widget build(BuildContext context) {
TextTheme textTheme = Theme
.of(context)
.textTheme;
return new Container(
margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.3),
borderRadius: new BorderRadius.circular(5.0),
),
child: new IntrinsicHeight(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 4.0, bottom: 4.0, right: 10.0),
child: new CircleAvatar(
backgroundImage: new NetworkImage(
'http://thecatapi.com/api/images/get?format=src'
'&size=small&type=jpg#${title.hashCode}'
),
radius: 20.0,
),
),
new Expanded(
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(title, style: textTheme.subhead),
new Text(author, style: textTheme.caption),
],
),
),
),
new Container(
margin: new EdgeInsets.symmetric(horizontal: 5.0),
child: new InkWell(
child: new Icon(Icons.play_arrow, size: 40.0),
onTap: () {
},
),
),
new Container(
margin: new EdgeInsets.symmetric(horizontal: 5.0),
child: new InkWell(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Icon(Icons.favorite, size: 25.0),
new Text('${likes ?? ''}'),
],
),
onTap: () {
},
),
),
],
),
),
);
}
}
class Feed extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new ListView(
children: [
new Song(title: 'Trapadelic lobo', author: 'lillobobeats', likes: 4),
new Song(title: 'Different', author: 'younglowkey', likes: 23),
new Song(title: 'Future', author: 'younglowkey', likes: 2),
new Song(title: 'ASAP', author: 'tha_producer808', likes: 13),
new Song(title: '🌲🌲🌲', author: 'TraphousePeyton'),
new Song(title: 'Something sweet...', author: '6ryan'),
new Song(title: 'Sharpie', author: 'Fergie_6'),
],
);
}
}
class CustomTabBar extends AnimatedWidget implements PreferredSizeWidget {
CustomTabBar({ this.pageController, this.pageNames })
: super(listenable: pageController);
final PageController pageController;
final List<String> pageNames;
@override
final Size preferredSize = new Size(0.0, 40.0);
@override
Widget build(BuildContext context) {
TextTheme textTheme = Theme
.of(context)
.textTheme;
return new Container(
height: 40.0,
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: new BoxDecoration(
color: Colors.grey.shade800.withOpacity(0.5),
borderRadius: new BorderRadius.circular(20.0),
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: new List.generate(pageNames.length, (int index) {
return new InkWell(
child: new Text(
pageNames[index],
style: textTheme.subhead.copyWith(
color: Colors.white.withOpacity(
index == pageController.page ? 1.0 : 0.2,
),
)
),
onTap: () {
pageController.animateToPage(
index,
curve: Curves.easeOut,
duration: const Duration(milliseconds: 300),
);
}
);
})
.toList(),
),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => new _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
PageController _pageController = new PageController(initialPage: 2);
@override
build(BuildContext context) {
final Map<String, Widget> pages = <String, Widget>{
'My Music': new Center(
child: new Text('My Music not implemented'),
),
'Shared': new Center(
child: new Text('Shared not implemented'),
),
'Feed': new Feed(),
};
TextTheme textTheme = Theme
.of(context)
.textTheme;
return new Stack(
children: [
new Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
const Color.fromARGB(255, 253, 72, 72),
const Color.fromARGB(255, 87, 97, 249),
],
stops: [0.0, 1.0],
)
),
child: new Align(
alignment: FractionalOffset.bottomCenter,
child: new Container(
padding: const EdgeInsets.all(10.0),
child: new Text(
'T I Z E',
style: textTheme.headline.copyWith(
color: Colors.grey.shade800.withOpacity(0.8),
fontWeight: FontWeight.bold,
),
),
)
)
),
new Scaffold(
backgroundColor: const Color(0x00000000),
appBar: new AppBar(
backgroundColor: const Color(0x00000000),
elevation: 0.0,
leading: new Center(
child: new ClipOval(
child: new Image.network(
'http://i.imgur.com/TtNPTe0.jpg',
),
),
),
actions: [
new IconButton(
icon: new Icon(Icons.add),
onPressed: () {
},
),
],
title: const Text('tofu\'s songs'),
bottom: new CustomTabBar(
pageController: _pageController,
pageNames: pages.keys.toList(),
),
),
body: new PageView(
controller: _pageController,
children: pages.values.toList(),
),
),
],
);
}
}
ফাইনাল নোট: এই উদাহরণে, আমি একজন নিয়মিত ব্যবহৃত AppBar, কিন্তু আপনি একটি ব্যবহার করতে পারে CustomScrollViewএকটি পিন করা সঙ্গে SliverAppBarথাকে যে, কোন elevation0.0 এর। এটি আপনার অ্যাপ্লিকেশন বারের পিছনে স্ক্রোল করার সাথে সাথে সামগ্রীটি দৃশ্যমান করে তুলবে। এটির সাথে সুন্দরভাবে খেলতে পারাটা মুশকিল PageView, কারণ এটি একটি নির্দিষ্ট আকারের ক্ষেত্রের মধ্যে নিজেকে বিভক্ত করার প্রত্যাশা করে।
