Container

Container

Container

MaterialApp({ title,theme, home: Scaffold({ appBar, body: Container ( alignment, margin, padding, color, child ), }), })

açıklama

child alır. çerceve görevi görür önemli farkı margin padding ve color bulundurur.children almaz!

konum

MaterialApp({ title,theme, home: Scaffold({ appBar, body: Container (), }), })

parametreler

Container( 
      alignment: Alignment.bottomCenter   // child öğelerin nereye hizalanacagını belirtir. örnekte en altta ortaya hizalanıyor.
      margin: EdgeInsets.only(top:10.0)   // parent widgeti(yani bir ustteki widgeti) hangi taraftan ne kadar itmeli.Örnekte üstten 10 birim kadar itiyor.
      padding: EdgeInsets.all(50.0)     // child widgeti hangi taraftan ne kadar itmeli.Örnekte her yandan eşit 50 birim kadar itiyor.
      color: Colors.red :         // arkaplan rengi.Örnekte arkaplanrengi kırmızı atanmış.    
      child: Column()  :          // bir çoçuk alır. Örnekte Column atanmış
   )

örnek uygulama

container-orn 
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("Building layouts"),
        ),
        body: myLayoutWidget(),
      ),
    );
  }
}

Widget myLayoutWidget() {
  return Container(
    margin: EdgeInsets.all(30.0),
    padding: EdgeInsets.all(10.0),
    alignment: Alignment.topCenter,
    width: 200,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.green,
      border: Border.all(),
    ),
    child: Text("Hello", style: TextStyle(fontSize: 30)),
  );
}
Tags:

Bir cevap yazın