How to align bottom suffix in a CupertinoTextField with Flutter?

38 views Asked by At

I can't align the icons in my container, nor the CupertinoTextField suffix at the bottom when my CupertinoTextField is on several lines.

The only thing I've found about this concerns MaterialUI's TextField.

Here is my result :

Image of my app

And what i want :

Image of Message app of Apple

I also want the 2 icons in the cupertinotextfield container to be aligned at the bottom (in addition to the one in the textfield).

For the moment i do this :

CupertinoTextField(
          placeholder: text,
          placeholderStyle: const TextStyle(
            color: Color.fromRGBO(255, 255, 255, 0.45),
            fontSize: 16,
            fontFamily: 'SFProDisplay',
            fontWeight: FontWeight.bold,
          ),
          padding: const EdgeInsets.symmetric(horizontal: 30.0,),
          decoration: BoxDecoration(
            color: Colors.black,
            border: Border.all(
              color: const Color(0xff232323),
              width: 0.5,
            ),
            borderRadius: BorderRadius.circular(30.0),
          ),
          style: const TextStyle(
            color: Color(0xffD7E2D6),
            fontSize: 16,
            fontFamily: 'SFProDisplay',
            fontWeight: FontWeight.bold,
          ),
          suffix: Align(
            alignment: Alignment.bottomRight,
            child: CupertinoButton(
              onPressed: sendMessage(),
              child: Icon(CupertinoIcons.paperplane_fill),
              padding: EdgeInsets.zero,
            ),

          ),
          suffixMode: OverlayVisibilityMode.always,
          maxLines: null,
        )

And my textfield is contain here :

Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xff051f13),
                  Color.fromRGBO(27, 60, 22, 0)
                ], // Couleurs de votre dégradé
              ),
              image: DecorationImage(
                  image: Svg('assets/bg_multiple_icon.svg',),
                  fit: BoxFit.cover
              ),
            ),
          child : Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                decoration: const BoxDecoration(
                  color: Color(0xff181818)
                ),
                child: Row(
                  // mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        CupertinoButton(
                          onPressed: addFile(),
                          child: const Icon(CupertinoIcons.paperclip),
                        ),
                      ],
                    ),
                    const Expanded(child: MessageTextField(text: "Message",)),
                    CupertinoButton(
                      onPressed: addFile(),
                      child: const Icon(CupertinoIcons.square_grid_2x2),
                    ),
                  ],

                ),
              )
            ],
          )
        )
0

There are 0 answers