So i'm emulating an old app I have where the UI looks like this

Currently i'm focused on creating the UI layout for the purple side bar, I did that by creating a Container with a purple background. Within the container I created a column with multiple children and just used an empty SizedBox to create distance between one widget from another.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('Sample Text'),
      //   elevation: 5.0,
      // ),
      body: _buildContent(),
    );
  }

  Widget _buildContent() {
    // private method
    return Container(
      color: Colors.deepPurpleAccent,
      padding: EdgeInsets.all(16.0),
      child: Column(
        // crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            color: Colors.orange,
            child: SizedBox(
              height: 100.0,
              width: 80.0,
            ),
          ),
          SizedBox(
            height: 140.0,
          ),
          Container(
            color: Colors.red,
            child: SizedBox(
              height: 50.0,
              width: 80.0,
            ),
          ),
          SizedBox(
            height: 8.0,
          ),
          Container(
            color: Colors.purple,
            child: SizedBox(
              height: 50.0,
              width: 80.0,
            ),
          ),
        ],
      ),
    );
  }
}

I'm quite new to flutter so i'm wondering if there's a better way to structure my layout of the side bar? Also to think in the future, since the name "BagTrack" Is on the same level as "Analytic Overview" Should that just be one giant row"?

CodePudding user response：

Actual answer

Method 1

@Mahfuzur Rahman answer is good, but to actually answer your question about other ways. Flex widgets (Column and Row extend the Flex widget), have both mainAxisAlignment and crossAxisAlignment, they can be used to align them more easily between different devices/screens sizes.

So maybe grouping your red and purple boxes in a Column with mainAxisSize set to MainAxisSize.min, and aligning the surrounding column with a specific size.

https://api.flutter.dev/flutter/widgets/Column-class.html

Method 2

Another way, if you would like some widget to occupy some percentage amount of space from it's parent, I suggest you look into Expanded widget, Flexible widget.

Method 3

Or even FractionallySizedBox could be a good widget for you, but then I would also look at this LayoutBuilder widget to solve the potential Unbounded Height/Width exception.

Second smaller question

It's entirely up to you to decide about your second question concerning the giant row. I wouldn't do it though. Probably would use a const SizedBox or const EdgeInsets (for Padding) and keep them at the same height this way.

Just complementing Flutter knowledge

PS: Since you are new to Flutter. As a suggestion for future performance: avoid the Container widget as much as you know, there are a lot of simpler widgets like SizedBox, ColoredBox, DecoratedBox and Padding that you can use in its place that could be marked as const sometimes and be less expensive.

For understanding final and const:

• final is a variable that cannot be reassigned by accident inside your code. When you instantiate it you give it a value and that's it. (Using late changes that a bit but not much);
• const is a variable assigned by the compiler, if you are familiar with C it's like #define but there is a little difference, every time you say const EdgeInsets.all(8) for example, the compiler will detect that and use the same variable, so you don't have to remember a specific constant variable name.

CodePudding user response：

Yes there is. But using SizedBox also wont hurt.

I usually Prefer ListTile for each element in the drawer.

ListTile(
leading: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {},
child: Container(
  width: 48,
  height: 48,
  padding: const EdgeInsets.symmetric(vertical: 4.0),
  alignment: Alignment.center,
  child: const CircleAvatar(),
   ),
  ),
  title: const Text('title'),
  dense: false,
  )