Question 76988 in Flutter Question posted in
The official Flutter documentation can be found here.

In Flutter, how can I create a shape like this XML shape I created in android java app

I created an android app in java and I had this xml shape in it:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
<stroke android:width="1dp" android:color="@color/DodgerBlue"/>
<solid android:color="@color/White" />

enter image description here

Now I am creating a flutter app, so I am trying to create the same shape in flutter, but I had no luck.

Can someone guide me on how to do this ?

Thanks.

Tags:

2

Answers


  1. 0

    There are widget like TextFiled,TextFormFiled can be used to take user input.

    Lets split the xml code

    • android:radius="20dp" it should have 20px(flutter use pixel) for border and TextFormFiled widget can provide different borders based on state.
    • padding android:left="10dp...." having 10px padding
    • stroke android:width="1dp" means border thickness
    • and background color

    We can use OutlineInputBorder

    const border = OutlineInputBorder(
      borderSide: BorderSide(
        color: Color.fromARGB(255, 0, 68, 255),
        width: 1,
      ),
      borderRadius: BorderRadius.all(
        Radius.circular(20),
      ),
    );

    The the widget will be

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

  @override
  Widget build(BuildContext context) {
    const border = OutlineInputBorder(
      borderSide: BorderSide(
        color: Color.fromARGB(255, 0, 68, 255),
        width: 1,
      ),
      borderRadius: BorderRadius.all(
        Radius.circular(20),
      ),
    );
    return TextFormField(
      enabled: false,
      decoration: InputDecoration(
        filled: true,
        fillColor: Colors.grey.shade50,
        contentPadding: EdgeInsets.all(10),
        border: border,
        enabledBorder: border,
        focusedBorder: border,
        errorBorder: border,
        disabledBorder: border,
        focusedErrorBorder: border,
      ),
    );
  }
}

    For more, head on flutter.dev/flutter/material/TextFormField-class.html

    Login or Signup to reply.
  2. 0

    The simplest way to add border radius and border width is a container using BoxDecoration

    import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _simpleBorder(),
          ],
        ),
      )),
    );
  }

  Widget _simpleBorder() => Container(
        width: 200,
        height: 50,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.blue)),
      );
}

    border

    There are more advanced ways using shapes in Flutter. If this does not solve your question I can provide more info on shapes

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search