المحاذاة داخل صندوق

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 12 من 30.

يضع Center العنصر الابن في منتصف المساحة المتاحة له. ويؤدي Align الأمر نفسه لأي موضع تختاره:

Container(
  height: 200,
  color: Colors.teal,
  child: const Align(
    alignment: Alignment.topRight,
    child: Text('Top right'),
  ),
)

تُسمّى المواضع بأسماء الزوايا والحواف: Alignment.topLeft وtopCenter وtopRight وcenterLeft وcenter وcenterRight وbottomLeft وbottomCenter وbottomRight. ويعادل Center استخدام Align مع Alignment.center.

يقبل Stack أيضًا وسيط alignment:، الذي يضع كل عنصر ابن غير Positioned: Stack(alignment: Alignment.bottomCenter, children: [...]).

التحدي

سهل

انقل التسمية التوضيحية Mountains من منتصف الغلاف إلى زاويته السفلية اليسرى. تُبقي الحشوة بينها وبين كلتا الحافتين مسافة 16 بكسل.

جرّب بنفسك

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Travel')),
        body: Column(
          children: [
            Container(
              height: 240,
              color: Colors.indigo,
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: Text(
                    'Mountains',
                    style: TextStyle(fontSize: 28, color: Colors.white),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}