Correct usage?

[mehmetext]

I'm new to use flutter_screenutil package and there are so terms that I don't know. I made a design by using this package and I wanted to ask that my usage is true or false to you. I used spMin so much, I'm afraid this is wrong 😅

My setup is below:

And my codes are below:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ScreenutilView extends StatefulWidget {
  const ScreenutilView({super.key});

  @override
  State<ScreenutilView> createState() => _ScreenutilViewState();
}

class _ScreenutilViewState extends State<ScreenutilView> {
  double size = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ScreenUtil View"),
      ),
      drawer: Drawer(
        width: 300.spMin,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(10),
        child: Column(
          children: [
            _iconsWidget,
            SizedBox(height: 10),
            _titleIconWidget,
            SizedBox(height: 10),
            _contentWidget,
            SizedBox(height: 10),
            _scrollingWidget,
          ],
        ),
      ),
    );
  }

  Widget get _scrollingWidget => SizedBox(
        height: 110.spMin,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Kutular",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.spMin,
              ),
            ),
            SizedBox(height: 5),
            Expanded(
              child: ListView.separated(
                scrollDirection: Axis.horizontal,
                separatorBuilder: (context, index) => SizedBox(width: 10),
                itemBuilder: (context, index) {
                  return Container(
                    width: 250.spMin,
                    padding: EdgeInsets.all(10.spMin),
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(10.spMin),
                    ),
                    child: Row(
                      children: [
                        Icon(
                          Icons.signpost,
                          color: Colors.white70,
                          size: 60.spMin,
                        ),
                        SizedBox(width: 10),
                        Flexible(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "Bu bir başlıktır.",
                                style: TextStyle(
                                  fontSize: 18.spMin,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white,
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                              SizedBox(height: 5.spMin),
                              Text(
                                "Uzun bir açıklamadır. Uzun bir açıklamadır. Uzun bir açıklamadır. Uzun bir açıklamadır.",
                                style: TextStyle(
                                  fontSize: 12.spMin,
                                  color: Colors.white60,
                                ),
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                },
                itemCount: 20,
              ),
            ),
          ],
        ),
      );

  Widget get _contentWidget => Text(
        """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit fermentum dictum. Ut a aliquam magna. Proin ut massa ultrices, ullamcorper ligula eget, accumsan velit. Vestibulum vitae efficitur tellus. Curabitur erat metus, ultrices vitae malesuada eu, tincidunt vel mi. Integer lacinia sagittis magna sed pretium. Nullam scelerisque molestie efficitur. Duis at odio nec nibh lobortis pharetra. Nam ac neque sit amet felis tincidunt laoreet. Nullam arcu eros, iaculis et augue a, condimentum scelerisque ipsum. Proin sed feugiat mi.

Nam lacus mi, consectetur et dui sed, interdum elementum mi. Phasellus volutpat accumsan lorem, ornare porttitor augue scelerisque ac. Aliquam vehicula, augue in mattis commodo, lacus turpis laoreet augue, eget elementum tellus neque ut nulla. Vivamus fringilla porta leo eget suscipit. Pellentesque viverra tellus risus, ac tempus ante laoreet lobortis. Proin fringilla a sem a suscipit. Maecenas maximus lorem in nulla convallis feugiat.
""",
        style: TextStyle(
          fontSize: 14.spMin,
        ),
      );

  Widget get _titleIconWidget => Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Flexible(
            child: Text(
              "Büyük ve Uzun Bir Başlık! Büyük ve Uzun Bir Başlık!",
              style: TextStyle(
                fontWeight: FontWeight.w900,
                fontSize: 30.spMin,
              ),
            ),
          ),
          IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.add,
              size: 30,
            ),
          ),
        ],
      );

  Widget get _iconsWidget => Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _iconBoxWidget,
          _iconBoxWidget,
          _iconBoxWidget,
        ],
      );

  Widget get _iconBoxWidget => Container(
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(10),
        ),
        width: 100.spMin,
        height: 100.spMin,
        alignment: Alignment.center,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.attractions,
              color: Colors.white,
              size: 50.spMin,
            ),
            Text(
              "Attractions",
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.spMin,
              ),
            ),
          ],
        ),
      );

  Widget get _exampleWidget => Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text("$size.w = ${size.w}"),
            Text("${size / 100}.sw = ${(size / 100).sw}"),
            Text("$size.h = ${size.h}"),
            Text("${size / 100}.sh = ${(size / 100).sh}"),
            Text("$size.r = ${size.r}"),
            Text("$size.sp = ${size.sp}"),
            Text("$size.spMin = ${size.spMin}"),
            Text("$size.spMax = ${size.spMax}"),
            Text("orientation = ${ScreenUtil().orientation}"),
            Text("textScaleFactor = ${ScreenUtil().textScaleFactor}"),
            Text("scaleHeight = ${ScreenUtil().scaleHeight}"),
            Text(
              "20.spMax = ${20.spMax}",
              style: TextStyle(
                fontSize: 20.spMax,
              ),
            ),
            Container(
              height: size.h,
              width: size.w,
              decoration: BoxDecoration(
                color: Colors.red,
              ),
            ),
            Container(
              height: size.h,
              width: size.h,
              decoration: BoxDecoration(
                color: Colors.green,
              ),
            ),
            Container(
              height: size.w,
              width: size.w,
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            Container(
              height: size.r,
              width: size.r,
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
          ],
        ),
      );
}

[lizhuoyuan]

SPmin is for fonts, and it is not used. If you don’t know if you need it, please press the following operation:

width: size.w height:size.w fontSize: size.sp

[mehmetext]

I know that spMin is for fonts but for example I want that a size limited to max 5 and min 2. How can I do this? So I want a size that depends w and it only should be between 2 and 5.

[lizhuoyuan]

result(xx){ return math.min(5,math.max(2,xx.sp)) }

I know that spMin is for fonts but for example I want that a size limited to max 5 and min 2. How can I do this? So I want a size that depends w and it only should be between 2 and 5.