how to increase margin from all side corsorelSliderBar from all 4 side in flutter

MarsH
July 24, 2023
142 views
0 votes
2 Answers

Hi mate i am totally new flutter i trying increase margin from all side corsorelSliderBar which we are calling inside widget but i am unable to call padding its giving me error can any one help me how to increase margin all 4 side .

@override
  Widget build(BuildContext context) {
    return Obx(() => dashboardViewModel.loading.value == true
        ? const Center(
            child: CircularProgressIndicator(
            color: red,
          ))
        : Scaffold(
            appBar: AppBar(
              backgroundColor: Theme.of(context).primaryColor,
              leading: Center(
                child: SizedBox(
                    height: 40,
                    width: 40,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: Image.asset(
                        'assets/images/vr_logo.png',
                        fit: BoxFit.cover,
                        height: 10,
                        width: 10,
                      ),
                    )),
              ),
              title: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    dashboardViewModel.dashboardDetail.data?.garageName ?? "",
                    style: white40017,
                  ),
                  Text(
                    dashboardViewModel.dashboardDetail.data?.garageOwnerName ??
                        "",
                    style: white50014,
                  )
                ],
              ),
              actions: [
                IconButton(
                  icon: const Icon(Icons.notifications_none_sharp),
                  onPressed: () {
                    context.push(const NotificationScreen());
                  },
                ),
              ],
            ),
            body: SizedBox(
              // color: Colors.amberAccent,
              height: size(context).height,
              width: size(context).width,
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      trackingTopBar(context),
                      Text(
                        "Overview",
                        style: black60018,
                      ),
                      progressAndJob(context),
                      corsorelSliderBar(context),
                      amountBar(context),
                      customerStatusBar(context)
                    ]),
              ),
            ),
          ));
  }

  CustomCard corsorelSliderBar(BuildContext context) {
    return CustomCard(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      title: Text(
        "",
        style: yellow90024,
      ),
      width: size(context).width,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          image: const DecorationImage(
              image: AssetImage("assets/images/background_image_1.png"))),
    );
  }

This is my code i am trying to increase margin from all 4 side but i am unable to please help me in this .

Thanks

Tags: flutter

Answers

I’ve added EdgeInsets.all(10) as the padding to the corsorelSliderBar. This will add 10 pixels of padding to all four sides of the CustomCard

Widget corsorelSliderBar() {
  return Padding(
    padding: EdgeInsets.all(10), // Add your desired padding here
    child: CustomCard(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      title: Text(
        "",
        style: yellow90024,
      ),
      width: size(context).width,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        image: const DecorationImage(
          image: AssetImage("assets/images/background_image_1.png"),
        ),
      ),
    ),
  );
}

First of all make sure you imported the material library!
This library contains Padding.

import 'package:flutter/material.dart';

Try to add padding with a shortcut.
You have to put your cursor on the widget name and press Alt+Enter (or Option+Return on a Mac) in Android Studio.

Then you have to choose Add padding from the menu.

It should give you something like this:

Padding(
  padding: const EdgeInsets.all(15.0),
  child: Text(
      "text",
      style: TextStyle(fontSize: 20.0),
    ),
);

you could also try:

Widget myWidget() {
  return  Padding(
    padding: const EdgeInsets.only(
      left: 15,
      top: 15,
      right: 15,
      bottom: 15,
    ),
    child: Text("text"),
  );
}

Since in your´e example left and right are the same and top and bottom are the same, we could simplify EdgeInsets to

padding: const EdgeInsets.symmetric(
  horizontal: 15,
  vertical: 15,
),

A very good tutorial about paddings in flutter is there.

There is a full code example about Paddings:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Padding/Margin on Text Widget"),
            backgroundColor: Colors.deepOrangeAccent),
        body: Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(15),
            child: Column(children: [
              Padding(
                padding: EdgeInsets.all(15), //apply padding to all four sides
                child: Text("Hello World, Text 1"),
              ),
              Padding(
                padding: EdgeInsets.only(
                    left: 35,
                    bottom: 40,
                    right: 20,
                    top: 10), //apply padding to some sides only
                child: Text("Hello World, Text 2"),
              ),
              Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: 20,
                    vertical: 20), //apply padding horizontal or vertical only
                child: Text("Hello World, Text 3"),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 20,
                    20), //apply padding to LTRB, L:Left, T:Top, R:Right, B:Bottom
                child: Text("Hello World, Text 3"),
              ),
              Container(
                //apply margin and padding using Container Widget.
                padding: EdgeInsets.all(20), //You can use EdgeInsets like above
                margin: EdgeInsets.all(5),
                child: Text("Hello World, Text 4"),
              ),
            ])));
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.