How can I design chip with outside an image in flutter?

Viewed 352

How can I design like this in flutter?like this

The above image u can use as star. star for reference

I have tried like the following but it's not correct,

                    new Container(
                  child:
                  ButtonTheme (
                      buttonColor:  buttonColor: Colors.teal,
                      child: Stack(
                          children: [
                            RaisedButton (
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10.0),
                                side: BorderSide(
                                  color: Colors.transparent,
                                ),
                              ),
                              child: Text(
                                '123',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 22.0,
                                  fontFamily: 'MuseoSans',
                                ),
                              ),
                              onPressed: () {
                                //click actions
                              },
                            ),
                            Positioned( // will be positioned in the top right of the container
                              top: 0,
                              left: 0,
                              child: new Image.asset('images/ic_star.png'),
                            )
                          ]
                      )
                  ),
                )
2 Answers

Try this

Container(
                      child: ButtonTheme(
                          buttonColor: Colors.teal,
                          child: Stack(children: [
                            Container(
                              height: 40.0,
                              child: Padding(
                                padding: const EdgeInsets.only(left: 25.0),
                                child: RaisedButton(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10.0),
                                    side: BorderSide(
                                      color: Colors.transparent,
                                    ),
                                  ),
                                  child: Text(
                                    '123',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 22.0,
                                      fontFamily: 'MuseoSans',
                                    ),
                                  ),
                                  onPressed: () {
                                    //click actions
                                  },
                                ),
                              ),
                            ),
                            Positioned(
                              // will be positioned in the top right of the container
                              top: 0,
                              left: 0,
                              child: new Image.asset(
                                'images/ic_star.png',
                                width: 50.0,
                                height: 50.0,
                              ),
                            )
                          ])),
                    )

It will look something like this -

enter image description here

Use 'Stack' widget

Here is pseudo code It very bad code but simple example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 90,
        height: 23,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.centerRight,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.teal,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                ),
                child: Text(
                  '  123123',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            ),
            Image.network('https://i.stack.imgur.com/SpWmJ.png', height: 23),
          ],
        ),
      ),
    );
  }
}

You have to change some size (like wrap content)

Related